@extends('admin.layouts.admin')

@section('title', '礼遇管理')
@section('page-title', '礼遇管理')

@push('styles')
    <!-- CryptoJS for SHA256 hashing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        /* 列表中的图片预览样式 - 统一小尺寸 */
        .image-preview {
            width: 80px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        /* 详情图特殊比例 345x125 */
        .image-preview.detail-image {
            width: 221px;
            height: 80px;
            object-fit: cover;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        .image-preview:hover {
            transform: scale(1.05);
        }

        /* 编辑模态框中的图片预览样式 */
        #editThumbnailPreview,
        #createThumbnailPreview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        #editBannerPreview,
        #createBannerPreview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        #editBannerCoverPreview,
        #createBannerCoverPreview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        #editBrandLogoPreview,
        #createBrandLogoPreview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        #editDetailImagePreview,
        #createDetailImagePreview {
            width: 340px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        .image-modal img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }

        /* 图片预览模态框层级高于编辑模态框 */
        #imageModal {
            z-index: 1060 !important;
        }

        #imageModal .modal-backdrop {
            z-index: 1059 !important;
        }

        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-active {
            background-color: #d4edda;
            color: #155724;
        }

        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }

        .btn-group-vertical .btn {
            margin-bottom: 2px;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* 修复下拉菜单内容左偏问题 */
        .dropdown-menu {
            padding: 0.5rem 0 !important;
            margin: 0 !important;
        }

        .dropdown-menu > li {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .dropdown-menu ul {
            padding-left: 0 !important;
            margin: 0 !important;
            list-style: none !important;
        }

        /* 重置Bootstrap的form-check默认样式 */
        .dropdown-menu .form-check {
            margin-bottom: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            min-height: auto !important;
            display: flex !important;
            align-items: center !important;
        }

        .dropdown-menu .form-check.ps-5 {
            padding-left: 2rem !important;  /* 二级项的缩进 */
        }

        .dropdown-menu .form-check.px-3 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .dropdown-menu .form-check-input {
            margin-left: 0 !important;
            margin-right: 0.5rem !important;
            margin-top: 0 !important;
            float: none !important;
            flex-shrink: 0;
        }

        .dropdown-menu .form-check-label {
            padding-left: 0 !important;
            margin-bottom: 0 !important;
            cursor: pointer;
        }

        /* 状态列宽度 */
        .table th:nth-child(3),
        .table td:nth-child(3) {
            width: 120px;
            min-width: 120px;
            text-align: center;
        }

        /* 表格列宽调整，适应小图片预览 */
        /* 图片列：缩略图、首页大图背景图、首页大图前景图、品牌Logo、详情图 */
        .table th:nth-child(4),
        .table th:nth-child(5),
        .table th:nth-child(6),
        .table th:nth-child(7),
        .table td:nth-child(4),
        .table td:nth-child(5),
        .table td:nth-child(6),
        .table td:nth-child(7) {
            width: 100px;
            min-width: 100px;
            text-align: center;
        }

        /* 详情图列特殊宽度 */
        .table th:nth-child(8),
        .table td:nth-child(8) {
            width: 240px;
            min-width: 240px;
            text-align: center;
        }

        /* 操作列宽度 */
        .table th:nth-child(9),
        .table td:nth-child(9) {
            width: 100px;
            min-width: 100px;
            text-align: center;
        }

        /* 表格容器样式，支持水平滚动 */
        .table-responsive {
            overflow-x: auto;
            min-height: 400px;
        }

        /* 表格最小宽度，适应更多图片列 */
        .table {
            min-width: 1180px;
        }

        /* 表格单元格垂直对齐 */
        .table td {
            vertical-align: middle;
        }

        /* 过滤器按钮组样式 */
        .btn-group.flex-wrap {
            flex-wrap: wrap;
            gap: 2px;
        }

        /* 状态快速筛选样式 */
        #statusQuickFilter .btn {
            border-radius: 0.375rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        #statusQuickFilter .btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        #statusQuickFilter .btn:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        #statusQuickFilter .btn:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        #statusQuickFilter .btn-check:checked+.btn-outline-success {
            background-color: #198754;
            border-color: #198754;
            color: white;
        }

        #statusQuickFilter .btn-check:checked+.btn-outline-danger {
            background-color: #dc3545;
            border-color: #dc3545;
            color: white;
        }

        #statusQuickFilter .btn-check:checked+.btn-outline-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: white;
        }

        /* 标签页样式增强 */
        .nav-tabs .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link.active {
            font-weight: 600;
        }

        .nav-tabs .nav-link:not(.active):hover {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .btn-group.flex-wrap .btn-check+.btn {
            margin-bottom: 2px;
        }

        .form-label.small {
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: #495057;
        }

        /* 让所有表单标签加粗显示 */
        .form-label {
            font-weight: 600;
        }

        /* 富文本内容渲染样式 */
        .summernote-content {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
        }

        .summernote-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }

        .summernote-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .summernote-content table,
        .summernote-content th,
        .summernote-content td {
            border: 1px solid #ddd;
        }

        .summernote-content th,
        .summernote-content td {
            padding: 8px 12px;
            text-align: left;
        }

        .summernote-content th {
            background-color: #f5f5f5;
            font-weight: bold;
        }

        .summernote-content ul,
        .summernote-content ol {
            margin: 10px 0;
            padding-left: 20px;
        }

        .summernote-content p {
            margin: 0 0 10px;
        }

        .summernote-content strong {
            font-weight: bold;
        }

        .summernote-content em {
            font-style: italic;
        }

        .summernote-content u {
            text-decoration: underline;
        }

        /* 富文本编辑器容器 */
        .summernote-editor-container {
            width: 100%;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        <!-- 标签页导航 -->
        <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="offers-tab" data-bs-toggle="tab" data-bs-target="#offers-pane"
                    type="button" role="tab">
                    <i class="fas fa-tags me-2"></i>礼遇列表
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="hero-contents-tab" data-bs-toggle="tab"
                    data-bs-target="#hero-contents-pane" type="button" role="tab">
                    <i class="fas fa-star me-2"></i>Hero Contents
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="makes-tab" data-bs-toggle="tab" data-bs-target="#makes-pane" type="button" role="tab">
                    <i class="fas fa-credit-card me-2"></i>办卡专区
                </button>
            </li>
        </ul>

        <!-- 标签页内容 -->
        <div class="tab-content" id="mainTabsContent">
            <!-- 礼遇列表标签页 -->
            <div class="tab-pane fade show active" id="offers-pane" role="tabpanel">
                <!-- 搜索和筛选 -->
                <div class="card mb-4">
                    <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-5">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchInput"
                                    placeholder="搜索标题、副标题、OID、标签、适用卡片...">
                                <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="perPageSelect">
                                <option value="15">每页15条</option>
                                <option value="30">每页30条</option>
                                <option value="50" selected>每页50条</option>
                                <option value="100">每页100条</option>
                                <option value="200">每页200条</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-secondary w-100" id="refreshBtn">
                                <i class="fas fa-sync-alt me-2"></i>刷新
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#createModal"
                                id="createOfferBtn">
                                <i class="fas fa-plus me-2"></i>创建新礼遇
                            </button>
                        </div>
                    </div>

                    <!-- 状态快速筛选 -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="btn-group w-100" role="group" id="statusQuickFilter">
                                <input type="radio" class="btn-check" name="statusQuickFilter" id="status_quick_active"
                                    value="1" checked>
                                <label class="btn btn-outline-success" for="status_quick_active">
                                    <i class="fas fa-check-circle me-1"></i>启用的礼遇 <span id="activeCount"
                                        class="badge bg-success ms-1">0</span>
                                </label>
                                <input type="radio" class="btn-check" name="statusQuickFilter"
                                    id="status_quick_inactive" value="0">
                                <label class="btn btn-outline-danger" for="status_quick_inactive">
                                    <i class="fas fa-times-circle me-1"></i>禁用的礼遇 <span id="inactiveCount"
                                        class="badge bg-danger ms-1">0</span>
                                </label>
                                <input type="radio" class="btn-check" name="statusQuickFilter" id="status_quick_all"
                                    value="">
                                <label class="btn btn-outline-secondary" for="status_quick_all">
                                    <i class="fas fa-list me-1"></i>全部礼遇 <span id="totalCount"
                                        class="badge bg-secondary ms-1">0</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- 过滤条件 -->
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">高级筛选：</h6>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="clearFiltersBtn">
                                    <i class="fas fa-times me-1"></i>清除所有
                                </button>
                            </div>

                            <!-- Topics筛选 - 与配置中的场景选择一致 -->
                            <div class="mb-3">
                                <label class="form-label small">场景：</label>
                                <div class="btn-group flex-wrap" role="group" id="topicsFilter">
                                    <input type="checkbox" class="btn-check" id="topic_all" value="" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="topic_all">全部</label>
                                    <input type="checkbox" class="btn-check" id="topic_overseas" value="overseas">
                                    <label class="btn btn-outline-primary btn-sm" for="topic_overseas">出境旅行</label>
                                    <input type="checkbox" class="btn-check" id="topic_students" value="students">
                                    <label class="btn btn-outline-primary btn-sm" for="topic_students">出国留学</label>
                                    <input type="checkbox" class="btn-check" id="topic_local" value="local">
                                    <label class="btn btn-outline-primary btn-sm" for="topic_local">本地生活</label>
                                    <input type="checkbox" class="btn-check" id="topic_haitao" value="haitao">
                                    <label class="btn btn-outline-primary btn-sm" for="topic_haitao">海淘</label>
                                    <input type="checkbox" class="btn-check" id="topic_inbound" value="inbound">
                                    <label class="btn btn-outline-primary btn-sm" for="topic_inbound">入境旅行</label>
                                </div>
                            </div>

                            <!-- Regions筛选 - 与配置中的国家/地区选择一致（两层结构） -->
                            <div class="mb-3">
                                <label class="form-label small">国家/地区：</label>
                                <div class="dropdown w-100">
                                    <button class="btn btn-outline-success btn-sm dropdown-toggle w-100 text-start" type="button" id="regionsFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                        <span id="regionsFilterDisplay">全部地区</span>
                                    </button>
                                    <ul class="dropdown-menu w-100" aria-labelledby="regionsFilterDropdown" style="max-height: 400px; overflow-y: auto;">
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox" type="checkbox" value="" id="filter_region_all" checked>
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_all">全部</label>
                                            </div>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <!-- 中国大陆 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="中国大陆" id="filter_region_cn" data-group="cn">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_cn">中国大陆</label>
                                            </div>
                                        </li>
                                        <!-- 港澳台 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="港澳台" id="filter_region_hmt" data-group="hmt">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_hmt">港澳台</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="中国香港" id="filter_region_hk" data-parent="hmt">
                                                <label class="form-check-label w-100" for="filter_region_hk">中国香港</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="中国澳门" id="filter_region_mo" data-parent="hmt">
                                                <label class="form-check-label w-100" for="filter_region_mo">中国澳门</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="中国台湾" id="filter_region_tw" data-parent="hmt">
                                                <label class="form-check-label w-100" for="filter_region_tw">中国台湾</label>
                                            </div>
                                        </li>
                                        <!-- 日韩 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="日韩" id="filter_region_jk" data-group="jk">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_jk">日韩</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="日本" id="filter_region_jp" data-parent="jk">
                                                <label class="form-check-label w-100" for="filter_region_jp">日本</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="韩国" id="filter_region_kr" data-parent="jk">
                                                <label class="form-check-label w-100" for="filter_region_kr">韩国</label>
                                            </div>
                                        </li>
                                        <!-- 东南亚 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="东南亚" id="filter_region_sea" data-group="sea">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_sea">东南亚</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="新加坡" id="filter_region_sg" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_sg">新加坡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="泰国" id="filter_region_th" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_th">泰国</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="马来西亚" id="filter_region_my" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_my">马来西亚</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="越南" id="filter_region_vn" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_vn">越南</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="菲律宾" id="filter_region_ph" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_ph">菲律宾</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="印度尼西亚" id="filter_region_id" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_id">印度尼西亚</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="柬埔寨" id="filter_region_kh" data-parent="sea">
                                                <label class="form-check-label w-100" for="filter_region_kh">柬埔寨</label>
                                            </div>
                                        </li>
                                        <!-- 欧洲 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="欧洲" id="filter_region_eu" data-group="eu">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_eu">欧洲</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="英国" id="filter_region_gb" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_gb">英国</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="法国" id="filter_region_fr" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_fr">法国</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="德国" id="filter_region_de" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_de">德国</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="意大利" id="filter_region_it" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_it">意大利</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="西班牙" id="filter_region_es" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_es">西班牙</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="瑞士" id="filter_region_ch" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_ch">瑞士</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="荷兰" id="filter_region_nl" data-parent="eu">
                                                <label class="form-check-label w-100" for="filter_region_nl">荷兰</label>
                                            </div>
                                        </li>
                                        <!-- 中东 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="中东" id="filter_region_me" data-group="me">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_me">中东</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="迪拜" id="filter_region_dxb" data-parent="me">
                                                <label class="form-check-label w-100" for="filter_region_dxb">迪拜</label>
                                            </div>
                                        </li>
                                        <!-- 北美 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="北美" id="filter_region_na" data-group="na">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_na">北美</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="美国" id="filter_region_us" data-parent="na">
                                                <label class="form-check-label w-100" for="filter_region_us">美国</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="加拿大" id="filter_region_ca" data-parent="na">
                                                <label class="form-check-label w-100" for="filter_region_ca">加拿大</label>
                                            </div>
                                        </li>
                                        <!-- 澳新 -->
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-region-checkbox region-group" type="checkbox" value="澳新" id="filter_region_anz" data-group="anz">
                                                <label class="form-check-label w-100 fw-bold" for="filter_region_anz">澳新</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="澳大利亚" id="filter_region_au" data-parent="anz">
                                                <label class="form-check-label w-100" for="filter_region_au">澳大利亚</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check ps-5 py-1">
                                                <input class="form-check-input filter-region-checkbox region-country" type="checkbox" value="新西兰" id="filter_region_nz" data-parent="anz">
                                                <label class="form-check-label w-100" for="filter_region_nz">新西兰</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 分类筛选 - 与配置中的分类选择一致 -->
                            <div class="mb-3">
                                <label class="form-label small">分类：</label>
                                <div class="dropdown w-100">
                                    <button class="btn btn-outline-warning btn-sm dropdown-toggle w-100 text-start" type="button" id="tagsFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                        <span id="tagsFilterDisplay">全部分类</span>
                                    </button>
                                    <ul class="dropdown-menu w-100" aria-labelledby="tagsFilterDropdown" style="max-height: 300px; overflow-y: auto;">
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="" id="filter_tag_all" checked>
                                                <label class="form-check-label w-100 fw-bold" for="filter_tag_all">全部</label>
                                            </div>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="餐饮" id="filter_tag_food">
                                                <label class="form-check-label w-100" for="filter_tag_food">餐饮</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="购物" id="filter_tag_shopping">
                                                <label class="form-check-label w-100" for="filter_tag_shopping">购物</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="住宿" id="filter_tag_accommodation">
                                                <label class="form-check-label w-100" for="filter_tag_accommodation">住宿</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="酒店" id="filter_tag_hotel">
                                                <label class="form-check-label w-100" for="filter_tag_hotel">酒店</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="交通" id="filter_tag_transport">
                                                <label class="form-check-label w-100" for="filter_tag_transport">交通</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="出行" id="filter_tag_travel">
                                                <label class="form-check-label w-100" for="filter_tag_travel">出行</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="车出行" id="filter_tag_car">
                                                <label class="form-check-label w-100" for="filter_tag_car">车出行</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="机场" id="filter_tag_airport">
                                                <label class="form-check-label w-100" for="filter_tag_airport">机场</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="机场交通" id="filter_tag_airport_transport">
                                                <label class="form-check-label w-100" for="filter_tag_airport_transport">机场交通</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="贵宾厅" id="filter_tag_lounge">
                                                <label class="form-check-label w-100" for="filter_tag_lounge">贵宾厅</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="体验" id="filter_tag_experience">
                                                <label class="form-check-label w-100" for="filter_tag_experience">体验</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="娱乐" id="filter_tag_entertainment">
                                                <label class="form-check-label w-100" for="filter_tag_entertainment">娱乐</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="运动" id="filter_tag_sports">
                                                <label class="form-check-label w-100" for="filter_tag_sports">运动</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="教育" id="filter_tag_education">
                                                <label class="form-check-label w-100" for="filter_tag_education">教育</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="超市/便利店" id="filter_tag_supermarket">
                                                <label class="form-check-label w-100" for="filter_tag_supermarket">超市/便利店</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="通讯" id="filter_tag_telecom">
                                                <label class="form-check-label w-100" for="filter_tag_telecom">通讯</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="签证" id="filter_tag_visa">
                                                <label class="form-check-label w-100" for="filter_tag_visa">签证</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="高端" id="filter_tag_premium">
                                                <label class="form-check-label w-100" for="filter_tag_premium">高端</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="其他" id="filter_tag_other">
                                                <label class="form-check-label w-100" for="filter_tag_other">其他</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-tag-checkbox" type="checkbox" value="ApplePay" id="filter_tag_applepay">
                                                <label class="form-check-label w-100" for="filter_tag_applepay">ApplePay</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Level筛选 - 与配置中的适用卡等级一致 -->
                            <div class="mb-3">
                                <label class="form-label small">适用卡等级：</label>
                                <div class="dropdown w-100">
                                    <button class="btn btn-outline-info btn-sm dropdown-toggle w-100 text-start" type="button" id="levelFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                        <span id="levelFilterDisplay">全部等级</span>
                                    </button>
                                    <ul class="dropdown-menu w-100" aria-labelledby="levelFilterDropdown" style="max-height: 300px; overflow-y: auto;">
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="" id="filter_level_all" checked>
                                                <label class="form-check-label w-100 fw-bold" for="filter_level_all">全部</label>
                                            </div>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="所有等级" id="filter_level_any">
                                                <label class="form-check-label w-100" for="filter_level_any">所有等级</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="普卡" id="filter_level_0">
                                                <label class="form-check-label w-100" for="filter_level_0">普卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="金卡" id="filter_level_1">
                                                <label class="form-check-label w-100" for="filter_level_1">金卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="白金卡" id="filter_level_2">
                                                <label class="form-check-label w-100" for="filter_level_2">白金卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="御玺卡" id="filter_level_3">
                                                <label class="form-check-label w-100" for="filter_level_3">御玺卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="无限卡" id="filter_level_4">
                                                <label class="form-check-label w-100" for="filter_level_4">无限卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="商务卡" id="filter_level_5">
                                                <label class="form-check-label w-100" for="filter_level_5">商务卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="公司卡" id="filter_level_6">
                                                <label class="form-check-label w-100" for="filter_level_6">公司卡</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3 py-1">
                                                <input class="form-check-input filter-level-checkbox" type="checkbox" value="采购卡" id="filter_level_7">
                                                <label class="form-check-label w-100" for="filter_level_7">采购卡</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- VMORC礼遇筛选 -->
                            <div class="mb-3">
                                <label class="form-label small">VMORC礼遇：</label>
                                <div class="btn-group" role="group" id="isVmorcFilter">
                                    <input type="radio" class="btn-check" name="isVmorcFilter" id="is_vmorc_all" value=""
                                        checked>
                                    <label class="btn btn-outline-warning btn-sm" for="is_vmorc_all">全部</label>
                                    <input type="radio" class="btn-check" name="isVmorcFilter" id="is_vmorc_0" value="0">
                                    <label class="btn btn-outline-warning btn-sm" for="is_vmorc_0">否</label>
                                    <input type="radio" class="btn-check" name="isVmorcFilter" id="is_vmorc_1" value="1">
                                    <label class="btn btn-outline-warning btn-sm" for="is_vmorc_1">是</label>
                                </div>
                            </div>

                            <!-- 更多选项 -->
                            <div class="mb-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="toggleMoreFilters">
                                    <i class="fas fa-chevron-down me-1" id="moreFiltersIcon"></i>更多筛选选项
                                </button>
                            </div>

                            <!-- 更多筛选选项（默认隐藏） -->
                            <div id="moreFiltersSection" style="display: none;">
                                <!-- 有缩略图筛选 -->
                                <div class="mb-3">
                                    <label class="form-label small">有缩略图：</label>
                                    <div class="btn-group" role="group" id="hasThumbnailFilter">
                                        <input type="radio" class="btn-check" name="hasThumbnailFilter"
                                            id="has_thumbnail_all" value="" checked>
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_thumbnail_all">全部</label>
                                        <input type="radio" class="btn-check" name="hasThumbnailFilter"
                                            id="has_thumbnail_1" value="1">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_thumbnail_1">是</label>
                                        <input type="radio" class="btn-check" name="hasThumbnailFilter"
                                            id="has_thumbnail_0" value="0">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_thumbnail_0">否</label>
                                    </div>
                                </div>

                                <!-- 有首页大图筛选 -->
                                <div class="mb-3">
                                    <label class="form-label small">有首页大图：</label>
                                    <div class="btn-group" role="group" id="hasBannerFilter">
                                        <input type="radio" class="btn-check" name="hasBannerFilter" id="has_banner_all"
                                            value="" checked>
                                        <label class="btn btn-outline-secondary btn-sm" for="has_banner_all">全部</label>
                                        <input type="radio" class="btn-check" name="hasBannerFilter" id="has_banner_1"
                                            value="1">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_banner_1">是</label>
                                        <input type="radio" class="btn-check" name="hasBannerFilter" id="has_banner_0"
                                            value="0">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_banner_0">否</label>
                                    </div>
                                </div>

                                <!-- 有首页大图前景图筛选 -->
                                <div class="mb-3">
                                    <label class="form-label small">有首页大图前景图：</label>
                                    <div class="btn-group" role="group" id="hasBannerCoverFilter">
                                        <input type="radio" class="btn-check" name="hasBannerCoverFilter"
                                            id="has_banner_cover_all" value="" checked>
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_banner_cover_all">全部</label>
                                        <input type="radio" class="btn-check" name="hasBannerCoverFilter"
                                            id="has_banner_cover_1" value="1">
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_banner_cover_1">是</label>
                                        <input type="radio" class="btn-check" name="hasBannerCoverFilter"
                                            id="has_banner_cover_0" value="0">
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_banner_cover_0">否</label>
                                    </div>
                                </div>

                                <!-- 有品牌Logo筛选 -->
                                <div class="mb-3">
                                    <label class="form-label small">有品牌Logo：</label>
                                    <div class="btn-group" role="group" id="hasBrandLogoFilter">
                                        <input type="radio" class="btn-check" name="hasBrandLogoFilter"
                                            id="has_brand_logo_all" value="" checked>
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_brand_logo_all">全部</label>
                                        <input type="radio" class="btn-check" name="hasBrandLogoFilter"
                                            id="has_brand_logo_1" value="1">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_brand_logo_1">是</label>
                                        <input type="radio" class="btn-check" name="hasBrandLogoFilter"
                                            id="has_brand_logo_0" value="0">
                                        <label class="btn btn-outline-secondary btn-sm" for="has_brand_logo_0">否</label>
                                    </div>
                                </div>

                                <!-- 有详情图筛选 -->
                                <div class="mb-3">
                                    <label class="form-label small">有详情图：</label>
                                    <div class="btn-group" role="group" id="hasDetailImageFilter">
                                        <input type="radio" class="btn-check" name="hasDetailImageFilter"
                                            id="has_detail_image_all" value="" checked>
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_detail_image_all">全部</label>
                                        <input type="radio" class="btn-check" name="hasDetailImageFilter"
                                            id="has_detail_image_1" value="1">
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_detail_image_1">是</label>
                                        <input type="radio" class="btn-check" name="hasDetailImageFilter"
                                            id="has_detail_image_0" value="0">
                                        <label class="btn btn-outline-secondary btn-sm"
                                            for="has_detail_image_0">否</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 礼遇列表 -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" style="table-layout: fixed; width: 100%;">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 100px;">ID/OID</th>
                                    <th style="width: 320px;">图片</th>
                                    <th style="width: 250px;">标题</th>
                                    <th style="width: 110px;">场景</th>
                                    <th style="width: 130px;">地区</th>
                                    <th style="width: 110px;">分类</th>
                                    <th style="width: 150px;">卡种</th>
                                    <th style="width: 200px;">卡等级</th>
                                    <th style="width: 70px;">状态</th>
                                    <th style="width: 100px;">操作</th>
                                </tr>
                            </thead>
                            <tbody id="offersTableBody">
                                <!-- 数据将通过JS加载 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <div class="text-muted small" id="paginationInfo">
                            <!-- 分页信息将通过JS生成 -->
                        </div>
                        <nav aria-label="Page navigation">
                            <ul class="pagination mb-0" id="pagination">
                                <!-- 分页将通过JS生成 -->
                            </ul>
                        </nav>
                        <div class="text-muted small" id="paginationSummary">
                            <!-- 总页数信息将通过JS生成 -->
                        </div>
                    </div>

                    <div id="loadingIndicator" class="text-center py-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片查看模态框 -->
        <div class="modal fade" id="imageModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageModalTitle">图片预览</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center image-modal">
                        <img id="modalImage" src="" alt="图片预览">
                        <div class="mt-3">
                            <small class="text-muted" id="imageUrl"></small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a id="downloadLink" class="btn btn-primary" href="" download>
                            <i class="fas fa-download me-2"></i>下载图片
                        </a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 创建礼遇模态框 -->
        <div class="modal fade" id="createModal" tabindex="-1">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">创建新礼遇</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createForm">
                            <!-- 基本信息 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createTitle" class="form-label">标题 *</label>
                                    <input type="text" class="form-control" id="createTitle" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="createSubtitle" class="form-label">副标题</label>
                                    <input type="text" class="form-control" id="createSubtitle">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label class="form-label">VMORC礼遇</label>
                                    <div class="form-check form-switch mt-2">
                                        <input class="form-check-input" type="checkbox" id="createIsVmorc" onchange="toggleVmorcIdField('create')">
                                        <label class="form-check-label" for="createIsVmorc">标记为VMORC礼遇</label>
                                    </div>
                                </div>
                                <div class="col-md-3" id="createVmorcIdWrapper" style="display: none;">
                                    <label for="createVmorcId" class="form-label">VMORC ID</label>
                                    <input type="text" class="form-control font-monospace" id="createVmorcId" placeholder="输入VMORC ID">
                                </div>
                                <div class="col-md-3">
                                    <label for="createShortTitle" class="form-label">短标题</label>
                                    <input type="text" class="form-control" id="createShortTitle">
                                </div>
                                <div class="col-md-3">
                                    <label for="createStatus" class="form-label">状态 *</label>
                                    <select class="form-select" id="createStatus" required>
                                        <option value="1">启用</option>
                                        <option value="0">禁用</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 图片管理 -->
                            <h6 class="border-bottom pb-2 mb-3">图片管理</h6>
                            <div class="alert alert-info mb-3">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>推荐尺寸：</strong>
                                    缩略图 168×168px ｜ 首页大图背景图 700×700px ｜ 首页大图前景图 700×700px ｜ 品牌Logo 168×168px ｜ 详情图
                                    345×125px
                                </small>
                            </div>
                            <!-- 第一排图片 -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">缩略图 <small class="text-muted">(168×168)</small></label>
                                    <div class="image-upload-section">
                                        <img id="createThumbnailPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="createThumbnailUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="createThumbnailFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('thumbnail', 'createThumbnailUrl', 'createThumbnailPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="createThumbnailDeleteBtn"
                                                onclick="removeImage('createThumbnailUrl', 'createThumbnailPreview', 'createThumbnailDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">首页大图背景图 <small
                                            class="text-muted">(700×700)</small></label>
                                    <div class="image-upload-section">
                                        <img id="createBannerPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="createBannerUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="createBannerFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('banner', 'createBannerUrl', 'createBannerPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="createBannerDeleteBtn"
                                                onclick="removeImage('createBannerUrl', 'createBannerPreview', 'createBannerDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">首页大图前景图 <small
                                            class="text-muted">(700×700)</small></label>
                                    <div class="image-upload-section">
                                        <img id="createBannerCoverPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="createBannerCoverUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="createBannerCoverFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('banner_cover', 'createBannerCoverUrl', 'createBannerCoverPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="createBannerCoverDeleteBtn"
                                                onclick="removeImage('createBannerCoverUrl', 'createBannerCoverPreview', 'createBannerCoverDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二排图片 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">品牌Logo <small class="text-muted">(168×168)</small></label>
                                    <div class="image-upload-section">
                                        <img id="createBrandLogoPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="createBrandLogoUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="createBrandLogoFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('brand_logo', 'createBrandLogoUrl', 'createBrandLogoPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="createBrandLogoDeleteBtn"
                                                onclick="removeImage('createBrandLogoUrl', 'createBrandLogoPreview', 'createBrandLogoDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">详情图 <small class="text-muted">(345×125)</small></label>
                                    <div class="image-upload-section">
                                        <img id="createDetailImagePreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="createDetailImageUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="createDetailImageFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('detail_image', 'createDetailImageUrl', 'createDetailImagePreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="createDetailImageDeleteBtn"
                                                onclick="removeImage('createDetailImageUrl', 'createDetailImagePreview', 'createDetailImageDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 其他字段 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createRating" class="form-label">评分 (0-5)</label>
                                    <input type="number" class="form-control" id="createRating" min="0" max="5"
                                        step="0.1" value="0">
                                </div>
                                <div class="col-md-6">
                                    <label for="createLevel" class="form-label">等级</label>
                                    <select class="form-select" id="createLevel">
                                        <option value="0">普卡</option>
                                        <option value="1">金卡</option>
                                        <option value="2">白金卡</option>
                                        <option value="3">御玺卡</option>
                                        <option value="4">无限卡</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createOfferType" class="form-label">礼遇类型</label>
                                    <select class="form-select" id="createOfferType" onchange="toggleCreateEligibilityPanel()">
                                        <option value="">普通礼遇</option>
                                        <option value="eligible_benefit">资格权益礼遇</option>
                                    </select>
                                    <small class="form-text text-muted">资格权益礼遇需要配置资格规则</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="createProvider" class="form-label">服务商</label>
                                    <select class="form-select" id="createProvider" disabled>
                                        <option value="">请选择服务商</option>
                                        <option value="gha">GHA DISCOVERY</option>
                                        <option value="null">无需外部服务</option>
                                    </select>
                                    <small class="form-text text-muted">仅资格权益礼遇需要选择</small>
                                </div>
                            </div>

                            <!-- 资格配置面板 - 创建 -->
                            <div id="createEligibilityPanel" class="card mb-3" style="display: none; border: 1px solid #dee2e6;">
                                <div class="card-header bg-light py-2">
                                    <strong><i class="fas fa-cog me-1"></i> 资格配置</strong>
                                </div>
                                <div class="card-body">
                                    <!-- 不符合条件提示 -->
                                    <div class="mb-3">
                                        <label for="createIneligibleMessage" class="form-label">不符合条件提示</label>
                                        <input type="text" class="form-control" id="createIneligibleMessage" placeholder="例如：绑定Visa金卡及以上等级卡片即可享受此权益">
                                    </div>

                                    <!-- 会员等级配置区域 -->
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label mb-0"><strong>会员等级配置</strong></label>
                                        <button type="button" class="btn btn-sm btn-success" onclick="addCreateLevel()">
                                            <i class="fas fa-plus"></i> 添加等级
                                        </button>
                                    </div>
                                    <div id="createLevelsContainer">
                                        <!-- 动态添加的等级卡片会在这里 -->
                                    </div>
                                    <small class="form-text text-muted">点击"添加等级"配置不同卡片等级对应的会员权益</small>
                                </div>
                            </div>
                            <!-- 隐藏的JSON字段用于提交 -->
                            <input type="hidden" id="createEligibilityConfig">

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">适用卡种</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="createCardTypesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="createCardTypesDisplay">请选择适用卡种...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="createCardTypesDropdown" onclick="event.stopPropagation()">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-cardtype-checkbox" type="checkbox" value="双标卡" id="createCardType1">
                                                    <label class="form-check-label w-100" for="createCardType1">双标卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-cardtype-checkbox" type="checkbox" value="芯片感应卡" id="createCardType2">
                                                    <label class="form-check-label w-100" for="createCardType2">芯片感应卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-cardtype-checkbox" type="checkbox" value="双标芯片卡" id="createCardType3">
                                                    <label class="form-check-label w-100" for="createCardType3">双标芯片卡</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">适用卡等级</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="createProductLevelsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="createProductLevelsDisplay">请选择适用卡等级...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="createProductLevelsDropdown" onclick="event.stopPropagation()" style="max-height: 300px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="所有等级" id="createProduct0">
                                                    <label class="form-check-label w-100" for="createProduct0">所有等级</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="普卡" id="createProduct1">
                                                    <label class="form-check-label w-100" for="createProduct1">普卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="金卡" id="createProduct2">
                                                    <label class="form-check-label w-100" for="createProduct2">金卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="白金卡" id="createProduct3">
                                                    <label class="form-check-label w-100" for="createProduct3">白金卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="御玺卡" id="createProduct4">
                                                    <label class="form-check-label w-100" for="createProduct4">御玺卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="无限卡" id="createProduct5">
                                                    <label class="form-check-label w-100" for="createProduct5">无限卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="商务卡" id="createProduct6">
                                                    <label class="form-check-label w-100" for="createProduct6">商务卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="公司卡" id="createProduct7">
                                                    <label class="form-check-label w-100" for="createProduct7">公司卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-productlevel-checkbox" type="checkbox" value="采购卡" id="createProduct8">
                                                    <label class="form-check-label w-100" for="createProduct8">采购卡</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">场景选择</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="createTopicsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="createTopicsDisplay">请选择场景...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="createTopicsDropdown" onclick="event.stopPropagation()">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-topic-checkbox" type="checkbox" value="overseas" id="createTopicOverseas">
                                                    <label class="form-check-label w-100" for="createTopicOverseas">出境旅行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-topic-checkbox" type="checkbox" value="students" id="createTopicStudents">
                                                    <label class="form-check-label w-100" for="createTopicStudents">出国留学</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-topic-checkbox" type="checkbox" value="local" id="createTopicLocal">
                                                    <label class="form-check-label w-100" for="createTopicLocal">本地生活</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-topic-checkbox" type="checkbox" value="haitao" id="createTopicHaitao">
                                                    <label class="form-check-label w-100" for="createTopicHaitao">海淘</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-topic-checkbox" type="checkbox" value="inbound" id="createTopicInbound">
                                                    <label class="form-check-label w-100" for="createTopicInbound">入境旅行</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">国家/地区选择</label>
                                    <div class="form-text mb-2">可选择地区分组或具体国家，可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="createRegionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="createRegionsDisplay">请选择国家/地区...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="createRegionsDropdown" onclick="event.stopPropagation()" style="max-height: 400px; overflow-y: auto;">
                                            <!-- 中国大陆 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="中国大陆" id="createRegionCN" data-group="cn">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionCN">中国大陆</label>
                                                </div>
                                            </li>
                                            <!-- 港澳台 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="港澳台" id="createRegionHMT" data-group="hmt">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionHMT">港澳台</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="中国香港" id="createRegionHK" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="createRegionHK">中国香港</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="中国澳门" id="createRegionMO" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="createRegionMO">中国澳门</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="中国台湾" id="createRegionTW" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="createRegionTW">中国台湾</label>
                                                </div>
                                            </li>
                                            <!-- 日韩 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="日韩" id="createRegionJK" data-group="jk">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionJK">日韩</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="日本" id="createRegionJP" data-parent="jk">
                                                    <label class="form-check-label w-100" for="createRegionJP">日本</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="韩国" id="createRegionKR" data-parent="jk">
                                                    <label class="form-check-label w-100" for="createRegionKR">韩国</label>
                                                </div>
                                            </li>
                                            <!-- 东南亚 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="东南亚" id="createRegionSEA" data-group="sea">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionSEA">东南亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="新加坡" id="createRegionSG" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionSG">新加坡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="泰国" id="createRegionTH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionTH">泰国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="马来西亚" id="createRegionMY" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionMY">马来西亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="越南" id="createRegionVN" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionVN">越南</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="菲律宾" id="createRegionPH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionPH">菲律宾</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="印度尼西亚" id="createRegionID" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionID">印度尼西亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="柬埔寨" id="createRegionKH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="createRegionKH">柬埔寨</label>
                                                </div>
                                            </li>
                                            <!-- 欧洲 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="欧洲" id="createRegionEU" data-group="eu">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionEU">欧洲</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="英国" id="createRegionGB" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionGB">英国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="法国" id="createRegionFR" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionFR">法国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="德国" id="createRegionDE" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionDE">德国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="意大利" id="createRegionIT" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionIT">意大利</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="西班牙" id="createRegionES" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionES">西班牙</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="瑞士" id="createRegionCH" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionCH">瑞士</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="荷兰" id="createRegionNL" data-parent="eu">
                                                    <label class="form-check-label w-100" for="createRegionNL">荷兰</label>
                                                </div>
                                            </li>
                                            <!-- 中东 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="中东" id="createRegionME" data-group="me">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionME">中东</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="迪拜" id="createRegionDXB" data-parent="me">
                                                    <label class="form-check-label w-100" for="createRegionDXB">迪拜</label>
                                                </div>
                                            </li>
                                            <!-- 北美 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="北美" id="createRegionNA" data-group="na">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionNA">北美</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="美国" id="createRegionUS" data-parent="na">
                                                    <label class="form-check-label w-100" for="createRegionUS">美国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="加拿大" id="createRegionCA" data-parent="na">
                                                    <label class="form-check-label w-100" for="createRegionCA">加拿大</label>
                                                </div>
                                            </li>
                                            <!-- 澳新 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-region-checkbox region-group" type="checkbox" value="澳新" id="createRegionANZ" data-group="anz">
                                                    <label class="form-check-label w-100 fw-bold" for="createRegionANZ">澳新</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="澳大利亚" id="createRegionAU" data-parent="anz">
                                                    <label class="form-check-label w-100" for="createRegionAU">澳大利亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input create-region-checkbox region-country" type="checkbox" value="新西兰" id="createRegionNZ" data-parent="anz">
                                                    <label class="form-check-label w-100" for="createRegionNZ">新西兰</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">分类选择</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="createTagsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="createTagsDisplay">请选择分类...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="createTagsDropdown" onclick="event.stopPropagation()" style="max-height: 300px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="餐饮" id="createTagFood">
                                                    <label class="form-check-label w-100" for="createTagFood">餐饮</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="购物" id="createTagShopping">
                                                    <label class="form-check-label w-100" for="createTagShopping">购物</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="住宿" id="createTagAccommodation">
                                                    <label class="form-check-label w-100" for="createTagAccommodation">住宿</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="酒店" id="createTagHotel">
                                                    <label class="form-check-label w-100" for="createTagHotel">酒店</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="交通" id="createTagTransport">
                                                    <label class="form-check-label w-100" for="createTagTransport">交通</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="出行" id="createTagTravel">
                                                    <label class="form-check-label w-100" for="createTagTravel">出行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="车出行" id="createTagCarTravel">
                                                    <label class="form-check-label w-100" for="createTagCarTravel">车出行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="机场" id="createTagAirport">
                                                    <label class="form-check-label w-100" for="createTagAirport">机场</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="机场交通" id="createTagAirportTransport">
                                                    <label class="form-check-label w-100" for="createTagAirportTransport">机场交通</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="贵宾厅" id="createTagLounge">
                                                    <label class="form-check-label w-100" for="createTagLounge">贵宾厅</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="体验" id="createTagExperience">
                                                    <label class="form-check-label w-100" for="createTagExperience">体验</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="娱乐" id="createTagEntertainment">
                                                    <label class="form-check-label w-100" for="createTagEntertainment">娱乐</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="运动" id="createTagSports">
                                                    <label class="form-check-label w-100" for="createTagSports">运动</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="教育" id="createTagEducation">
                                                    <label class="form-check-label w-100" for="createTagEducation">教育</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="超市/便利店" id="createTagSupermarket">
                                                    <label class="form-check-label w-100" for="createTagSupermarket">超市/便利店</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="通讯" id="createTagTelecom">
                                                    <label class="form-check-label w-100" for="createTagTelecom">通讯</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="签证" id="createTagVisa">
                                                    <label class="form-check-label w-100" for="createTagVisa">签证</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="高端" id="createTagPremium">
                                                    <label class="form-check-label w-100" for="createTagPremium">高端</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="其他" id="createTagOther">
                                                    <label class="form-check-label w-100" for="createTagOther">其他</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input create-tag-checkbox" type="checkbox" value="ApplePay" id="createTagApplepay">
                                                    <label class="form-check-label w-100" for="createTagApplepay">ApplePay</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createStartDate" class="form-label">开始日期</label>
                                    <input type="date" class="form-control" id="createStartDate">
                                </div>
                                <div class="col-md-6">
                                    <label for="createEndDate" class="form-label">结束日期</label>
                                    <input type="date" class="form-control" id="createEndDate">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createStartDateText" class="form-label">开始日期文本</label>
                                    <input type="text" class="form-control" id="createStartDateText">
                                </div>
                                <div class="col-md-6">
                                    <label for="createEndDateText" class="form-label">结束日期文本</label>
                                    <input type="text" class="form-control" id="createEndDateText">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="createActionText" class="form-label">跳转说明</label>
                                    <input type="text" class="form-control" id="createActionText"
                                        placeholder="例如：立即申请、了解详情、前往官网等">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" id="createEnableWebview">
                                        <label class="form-check-label" for="createEnableWebview">
                                            启用Webview打开
                                        </label>
                                        <div class="form-text">勾选后将在应用内使用webview打开链接</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 跳转链接配置 -->
                            <div class="card mb-3">
                                <div class="card-header py-2">
                                    <strong>跳转链接配置</strong>
                                    <small class="text-muted ms-2">可手动输入或从活动中选择自动生成</small>
                                </div>
                                <div class="card-body">
                                    <!-- 活动搜索 -->
                                    <div class="mb-3">
                                        <label class="form-label">从活动生成链接 <span class="text-muted">(可选)</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="createCampaignSearch" placeholder="输入活动名称搜索...">
                                            <button class="btn btn-outline-secondary" type="button" onclick="searchCampaignsForOffer('create')">
                                                <i class="fas fa-search"></i> 搜索
                                            </button>
                                        </div>
                                        <div id="createCampaignSearchResults" class="mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                                        <div id="createSelectedCampaignInfo" class="mt-2" style="display: none;">
                                            <div class="alert alert-info py-2 mb-0">
                                                <small><i class="fas fa-check-circle me-1"></i>已选择活动: <span id="createSelectedCampaignName"></span></small>
                                                <button type="button" class="btn-close btn-sm float-end" onclick="clearSelectedCampaignForOffer('create')"></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="createLinkH5" class="form-label">H5链接</label>
                                            <input type="text" class="form-control" id="createLinkH5" placeholder="例如：https://... 或 /campaign/xxx">
                                            <div class="form-text">H5环境下点击跳转的目标地址</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="createLinkMiniapp" class="form-label">小程序链接</label>
                                            <input type="text" class="form-control" id="createLinkMiniapp" placeholder="例如：/campaign/detail/index?campaignId=xxx">
                                            <div class="form-text">微信小程序环境下点击跳转的目标路径</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 富文本字段 -->
                            <div class="mb-3">
                                <label class="form-label">奖励详情</label>
                                <div id="createRewardDetailEditor"></div>
                                <input type="hidden" id="createRewardDetail">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">商户描述</label>
                                <div id="createMerchantDescriptionEditor"></div>
                                <input type="hidden" id="createMerchantDescription">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">如何兑换</label>
                                <div id="createHowToRedeemEditor"></div>
                                <input type="hidden" id="createHowToRedeem">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">条款和条件</label>
                                <div id="createTermsAndConditionsEditor"></div>
                                <input type="hidden" id="createTermsAndConditions">
                            </div>

                            <!-- 白名单用户管理 -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-label">白名单用户</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <!-- 全局白名单控制 -->
                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="createOfferGlobalWhitelist" onchange="updateWhitelistConfig('createOffer')">
                                                    <label class="form-check-label" for="createOfferGlobalWhitelist">
                                                        启用全局白名单
                                                    </label>
                                                    <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此礼遇</small>
                                                </div>
                                            </div>

                                            <!-- 手机号输入 -->
                                            <div class="mb-3">
                                                <label class="form-label small">添加手机号到白名单</label>
                                                <div class="input-group input-group-sm mb-2">
                                                    <input type="text" class="form-control" id="createOfferPhoneInput"
                                                        placeholder="输入11位手机号后按回车添加"
                                                        pattern="1[3-9]\d{9}"
                                                        onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('createOffer', this.value); this.value=''; event.preventDefault();}">
                                                    <button type="button" class="btn btn-outline-secondary"
                                                        onclick="const input=document.getElementById('createOfferPhoneInput'); addPhoneToWhitelist('createOffer', input.value); input.value='';">添加</button>
                                                </div>
                                            </div>
                                            <div id="createOfferWhitelistTags" class="mb-2">
                                                <!-- 白名单用户标签会在这里显示 -->
                                            </div>
                                            <small class="text-muted">留空表示所有用户都可见此礼遇</small>
                                        </div>
                                    </div>
                                    <textarea class="form-control mt-2" id="createOfferWhitelist" rows="3"
                                        style="display: none;" placeholder="JSON格式的白名单配置"></textarea>
                                    <button type="button" class="btn btn-sm btn-secondary mt-2"
                                        onclick="toggleWhitelistJson('createOffer')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="createOffer()">创建</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑礼遇模态框 -->
        <div class="modal fade" id="editModal" tabindex="-1">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">编辑礼遇</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editForm">
                            <input type="hidden" id="editOfferId">

                            <!-- 基本信息 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editTitle" class="form-label">标题 *</label>
                                    <input type="text" class="form-control" id="editTitle" required oninput="updateOidPreview()">
                                </div>
                                <div class="col-md-6">
                                    <label for="editSubtitle" class="form-label">副标题</label>
                                    <input type="text" class="form-control" id="editSubtitle">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">OID <small class="text-muted">(创建时根据标题自动生成)</small></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control font-monospace bg-light" id="editOid" readonly>
                                        <span class="input-group-text" id="oidPreviewBadge" style="display: none;">
                                            <i class="fas fa-arrow-right me-1"></i>
                                            <span id="oidPreviewText" class="font-monospace text-primary"></span>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">VMORC礼遇</label>
                                            <div class="form-check form-switch mt-2">
                                                <input class="form-check-input" type="checkbox" id="editIsVmorc" onchange="toggleVmorcIdField('edit')">
                                                <label class="form-check-label" for="editIsVmorc">标记为VMORC礼遇</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6" id="editVmorcIdWrapper" style="display: none;">
                                            <label for="editVmorcId" class="form-label">VMORC ID</label>
                                            <input type="text" class="form-control font-monospace" id="editVmorcId" placeholder="输入VMORC ID">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="editShortTitle" class="form-label">短标题</label>
                                    <input type="text" class="form-control" id="editShortTitle">
                                </div>
                                <div class="col-md-4">
                                    <label for="editStatus" class="form-label">状态 *</label>
                                    <select class="form-select" id="editStatus" required>
                                        <option value="1">启用</option>
                                        <option value="0">禁用</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 图片管理 -->
                            <h6 class="border-bottom pb-2 mb-3">图片管理</h6>
                            <div class="alert alert-info mb-3">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>推荐尺寸：</strong>
                                    缩略图 168×168px ｜ 首页大图背景图 700×700px ｜ 首页大图前景图 700×700px ｜ 品牌Logo 168×168px ｜ 详情图
                                    345×125px
                                </small>
                            </div>
                            <!-- 第一排图片 -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">缩略图 <small class="text-muted">(168×168)</small></label>
                                    <div class="image-upload-section">
                                        <img id="editThumbnailPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="editThumbnailUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="editThumbnailFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('thumbnail', 'editThumbnailUrl', 'editThumbnailPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="editThumbnailDeleteBtn"
                                                onclick="removeImage('editThumbnailUrl', 'editThumbnailPreview', 'editThumbnailDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">首页大图 <small class="text-muted">(700×700)</small></label>
                                    <div class="image-upload-section">
                                        <img id="editBannerPreview" class="border rounded mb-2" style="display: none;">
                                        <input type="url" class="form-control mb-2" id="editBannerUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="editBannerFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('banner', 'editBannerUrl', 'editBannerPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="editBannerDeleteBtn"
                                                onclick="removeImage('editBannerUrl', 'editBannerPreview', 'editBannerDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">首页大图前景图 <small
                                            class="text-muted">(700×700)</small></label>
                                    <div class="image-upload-section">
                                        <img id="editBannerCoverPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="editBannerCoverUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="editBannerCoverFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('banner_cover', 'editBannerCoverUrl', 'editBannerCoverPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="editBannerCoverDeleteBtn"
                                                onclick="removeImage('editBannerCoverUrl', 'editBannerCoverPreview', 'editBannerCoverDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二排图片 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">品牌Logo <small class="text-muted">(168×168)</small></label>
                                    <div class="image-upload-section">
                                        <img id="editBrandLogoPreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="editBrandLogoUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="editBrandLogoFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('brand_logo', 'editBrandLogoUrl', 'editBrandLogoPreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="editBrandLogoDeleteBtn"
                                                onclick="removeImage('editBrandLogoUrl', 'editBrandLogoPreview', 'editBrandLogoDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">详情图 <small class="text-muted">(345×125)</small></label>
                                    <div class="image-upload-section">
                                        <img id="editDetailImagePreview" class="border rounded mb-2"
                                            style="display: none;">
                                        <input type="url" class="form-control mb-2" id="editDetailImageUrl"
                                            placeholder="图片URL">
                                        <input type="file" class="form-control mb-2" id="editDetailImageFile"
                                            accept="image/*,.svg">
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-sm btn-primary flex-fill"
                                                onclick="uploadImage('detail_image', 'editDetailImageUrl', 'editDetailImagePreview')">上传</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                id="editDetailImageDeleteBtn"
                                                onclick="removeImage('editDetailImageUrl', 'editDetailImagePreview', 'editDetailImageDeleteBtn')"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 其他字段 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editRating" class="form-label">评分 (0-5)</label>
                                    <input type="number" class="form-control" id="editRating" min="0" max="5"
                                        step="0.1" value="0">
                                </div>
                                <div class="col-md-6">
                                    <label for="editLevel" class="form-label">等级</label>
                                    <select class="form-select" id="editLevel">
                                        <option value="0">普卡</option>
                                        <option value="1">金卡</option>
                                        <option value="2">白金卡</option>
                                        <option value="3">御玺卡</option>
                                        <option value="4">无限卡</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editOfferType" class="form-label">礼遇类型</label>
                                    <select class="form-select" id="editOfferType" onchange="toggleEditEligibilityPanel()">
                                        <option value="">普通礼遇</option>
                                        <option value="eligible_benefit">资格权益礼遇</option>
                                    </select>
                                    <small class="form-text text-muted">资格权益礼遇需要配置资格规则</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="editProvider" class="form-label">服务商</label>
                                    <select class="form-select" id="editProvider" disabled>
                                        <option value="">请选择服务商</option>
                                        <option value="gha">GHA DISCOVERY</option>
                                        <option value="null">无需外部服务</option>
                                    </select>
                                    <small class="form-text text-muted">仅资格权益礼遇需要选择</small>
                                </div>
                            </div>

                            <!-- 资格配置面板 - 编辑 -->
                            <div id="editEligibilityPanel" class="card mb-3" style="display: none; border: 1px solid #dee2e6;">
                                <div class="card-header bg-light py-2">
                                    <strong><i class="fas fa-cog me-1"></i> 资格配置</strong>
                                </div>
                                <div class="card-body">
                                    <!-- 不符合条件提示 -->
                                    <div class="mb-3">
                                        <label for="editIneligibleMessage" class="form-label">不符合条件提示</label>
                                        <input type="text" class="form-control" id="editIneligibleMessage" placeholder="例如：绑定Visa金卡及以上等级卡片即可享受此权益">
                                    </div>

                                    <!-- 会员等级配置区域 -->
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label mb-0"><strong>会员等级配置</strong></label>
                                        <button type="button" class="btn btn-sm btn-success" onclick="addEditLevel()">
                                            <i class="fas fa-plus"></i> 添加等级
                                        </button>
                                    </div>
                                    <div id="editLevelsContainer">
                                        <!-- 动态添加的等级卡片会在这里 -->
                                    </div>
                                    <small class="form-text text-muted">点击"添加等级"配置不同卡片等级对应的会员权益</small>
                                </div>
                            </div>
                            <!-- 隐藏的JSON字段用于提交 -->
                            <input type="hidden" id="editEligibilityConfig">

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label mb-0">适用卡种</label>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearEditCardTypes()">
                                            <i class="fas fa-times"></i> 清空
                                        </button>
                                    </div>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="editCardTypesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="editCardTypesDisplay">请选择适用卡种...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="editCardTypesDropdown" onclick="event.stopPropagation()">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-cardtype-checkbox" type="checkbox" value="双标卡" id="editCardType1">
                                                    <label class="form-check-label w-100" for="editCardType1">双标卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-cardtype-checkbox" type="checkbox" value="芯片感应卡" id="editCardType2">
                                                    <label class="form-check-label w-100" for="editCardType2">芯片感应卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-cardtype-checkbox" type="checkbox" value="双标芯片卡" id="editCardType3">
                                                    <label class="form-check-label w-100" for="editCardType3">双标芯片卡</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label mb-0">适用卡等级</label>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearEditProductLevels()">
                                            <i class="fas fa-times"></i> 清空
                                        </button>
                                    </div>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="editProductLevelsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="editProductLevelsDisplay">请选择适用卡等级...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="editProductLevelsDropdown" onclick="event.stopPropagation()" style="max-height: 300px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="所有等级" id="editProduct0">
                                                    <label class="form-check-label w-100" for="editProduct0">所有等级</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="普卡" id="editProduct1">
                                                    <label class="form-check-label w-100" for="editProduct1">普卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="金卡" id="editProduct2">
                                                    <label class="form-check-label w-100" for="editProduct2">金卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="白金卡" id="editProduct3">
                                                    <label class="form-check-label w-100" for="editProduct3">白金卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="御玺卡" id="editProduct4">
                                                    <label class="form-check-label w-100" for="editProduct4">御玺卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="无限卡" id="editProduct5">
                                                    <label class="form-check-label w-100" for="editProduct5">无限卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="商务卡" id="editProduct6">
                                                    <label class="form-check-label w-100" for="editProduct6">商务卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="公司卡" id="editProduct7">
                                                    <label class="form-check-label w-100" for="editProduct7">公司卡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-productlevel-checkbox" type="checkbox" value="采购卡" id="editProduct8">
                                                    <label class="form-check-label w-100" for="editProduct8">采购卡</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">场景选择</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="editTopicsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="editTopicsDisplay">请选择场景...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="editTopicsDropdown" onclick="event.stopPropagation()">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-topic-checkbox" type="checkbox" value="overseas" id="editTopicOverseas">
                                                    <label class="form-check-label w-100" for="editTopicOverseas">出境旅行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-topic-checkbox" type="checkbox" value="students" id="editTopicStudents">
                                                    <label class="form-check-label w-100" for="editTopicStudents">出国留学</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-topic-checkbox" type="checkbox" value="local" id="editTopicLocal">
                                                    <label class="form-check-label w-100" for="editTopicLocal">本地生活</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-topic-checkbox" type="checkbox" value="haitao" id="editTopicHaitao">
                                                    <label class="form-check-label w-100" for="editTopicHaitao">海淘</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-topic-checkbox" type="checkbox" value="inbound" id="editTopicInbound">
                                                    <label class="form-check-label w-100" for="editTopicInbound">入境旅行</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">国家/地区选择</label>
                                    <div class="form-text mb-2">可选择地区分组或具体国家，可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="editRegionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="editRegionsDisplay">请选择国家/地区...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="editRegionsDropdown" onclick="event.stopPropagation()" style="max-height: 400px; overflow-y: auto;">
                                            <!-- 中国大陆 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="中国大陆" id="editRegionCN" data-group="cn">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionCN">中国大陆</label>
                                                </div>
                                            </li>
                                            <!-- 港澳台 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="港澳台" id="editRegionHMT" data-group="hmt">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionHMT">港澳台</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="中国香港" id="editRegionHK" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="editRegionHK">中国香港</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="中国澳门" id="editRegionMO" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="editRegionMO">中国澳门</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="中国台湾" id="editRegionTW" data-parent="hmt">
                                                    <label class="form-check-label w-100" for="editRegionTW">中国台湾</label>
                                                </div>
                                            </li>
                                            <!-- 日韩 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="日韩" id="editRegionJK" data-group="jk">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionJK">日韩</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="日本" id="editRegionJP" data-parent="jk">
                                                    <label class="form-check-label w-100" for="editRegionJP">日本</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="韩国" id="editRegionKR" data-parent="jk">
                                                    <label class="form-check-label w-100" for="editRegionKR">韩国</label>
                                                </div>
                                            </li>
                                            <!-- 东南亚 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="东南亚" id="editRegionSEA" data-group="sea">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionSEA">东南亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="新加坡" id="editRegionSG" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionSG">新加坡</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="泰国" id="editRegionTH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionTH">泰国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="马来西亚" id="editRegionMY" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionMY">马来西亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="越南" id="editRegionVN" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionVN">越南</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="菲律宾" id="editRegionPH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionPH">菲律宾</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="印度尼西亚" id="editRegionID" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionID">印度尼西亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="柬埔寨" id="editRegionKH" data-parent="sea">
                                                    <label class="form-check-label w-100" for="editRegionKH">柬埔寨</label>
                                                </div>
                                            </li>
                                            <!-- 欧洲 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="欧洲" id="editRegionEU" data-group="eu">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionEU">欧洲</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="英国" id="editRegionGB" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionGB">英国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="法国" id="editRegionFR" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionFR">法国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="德国" id="editRegionDE" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionDE">德国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="意大利" id="editRegionIT" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionIT">意大利</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="西班牙" id="editRegionES" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionES">西班牙</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="瑞士" id="editRegionCH" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionCH">瑞士</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="荷兰" id="editRegionNL" data-parent="eu">
                                                    <label class="form-check-label w-100" for="editRegionNL">荷兰</label>
                                                </div>
                                            </li>
                                            <!-- 中东 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="中东" id="editRegionME" data-group="me">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionME">中东</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="迪拜" id="editRegionDXB" data-parent="me">
                                                    <label class="form-check-label w-100" for="editRegionDXB">迪拜</label>
                                                </div>
                                            </li>
                                            <!-- 北美 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="北美" id="editRegionNA" data-group="na">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionNA">北美</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="美国" id="editRegionUS" data-parent="na">
                                                    <label class="form-check-label w-100" for="editRegionUS">美国</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="加拿大" id="editRegionCA" data-parent="na">
                                                    <label class="form-check-label w-100" for="editRegionCA">加拿大</label>
                                                </div>
                                            </li>
                                            <!-- 澳新 -->
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-region-checkbox region-group" type="checkbox" value="澳新" id="editRegionANZ" data-group="anz">
                                                    <label class="form-check-label w-100 fw-bold" for="editRegionANZ">澳新</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="澳大利亚" id="editRegionAU" data-parent="anz">
                                                    <label class="form-check-label w-100" for="editRegionAU">澳大利亚</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check ps-5 py-1">
                                                    <input class="form-check-input edit-region-checkbox region-country" type="checkbox" value="新西兰" id="editRegionNZ" data-parent="anz">
                                                    <label class="form-check-label w-100" for="editRegionNZ">新西兰</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">分类选择</label>
                                    <div class="form-text mb-2">可多选</div>
                                    <div class="dropdown w-100">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                                type="button" id="editTagsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span id="editTagsDisplay">请选择分类...</span>
                                        </button>
                                        <ul class="dropdown-menu w-100" aria-labelledby="editTagsDropdown" onclick="event.stopPropagation()" style="max-height: 300px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="餐饮" id="editTagFood">
                                                    <label class="form-check-label w-100" for="editTagFood">餐饮</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="购物" id="editTagShopping">
                                                    <label class="form-check-label w-100" for="editTagShopping">购物</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="住宿" id="editTagAccommodation">
                                                    <label class="form-check-label w-100" for="editTagAccommodation">住宿</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="酒店" id="editTagHotel">
                                                    <label class="form-check-label w-100" for="editTagHotel">酒店</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="交通" id="editTagTransport">
                                                    <label class="form-check-label w-100" for="editTagTransport">交通</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="出行" id="editTagTravel">
                                                    <label class="form-check-label w-100" for="editTagTravel">出行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="车出行" id="editTagCarTravel">
                                                    <label class="form-check-label w-100" for="editTagCarTravel">车出行</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="机场" id="editTagAirport">
                                                    <label class="form-check-label w-100" for="editTagAirport">机场</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="机场交通" id="editTagAirportTransport">
                                                    <label class="form-check-label w-100" for="editTagAirportTransport">机场交通</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="贵宾厅" id="editTagLounge">
                                                    <label class="form-check-label w-100" for="editTagLounge">贵宾厅</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="体验" id="editTagExperience">
                                                    <label class="form-check-label w-100" for="editTagExperience">体验</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="娱乐" id="editTagEntertainment">
                                                    <label class="form-check-label w-100" for="editTagEntertainment">娱乐</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="运动" id="editTagSports">
                                                    <label class="form-check-label w-100" for="editTagSports">运动</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="教育" id="editTagEducation">
                                                    <label class="form-check-label w-100" for="editTagEducation">教育</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="超市/便利店" id="editTagSupermarket">
                                                    <label class="form-check-label w-100" for="editTagSupermarket">超市/便利店</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="通讯" id="editTagTelecom">
                                                    <label class="form-check-label w-100" for="editTagTelecom">通讯</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="签证" id="editTagVisa">
                                                    <label class="form-check-label w-100" for="editTagVisa">签证</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="高端" id="editTagPremium">
                                                    <label class="form-check-label w-100" for="editTagPremium">高端</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="其他" id="editTagOther">
                                                    <label class="form-check-label w-100" for="editTagOther">其他</label>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="form-check px-3 py-2">
                                                    <input class="form-check-input edit-tag-checkbox" type="checkbox" value="ApplePay" id="editTagApplepay">
                                                    <label class="form-check-label w-100" for="editTagApplepay">ApplePay</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editStartDate" class="form-label">开始日期</label>
                                    <input type="date" class="form-control" id="editStartDate">
                                </div>
                                <div class="col-md-6">
                                    <label for="editEndDate" class="form-label">结束日期</label>
                                    <input type="date" class="form-control" id="editEndDate">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editStartDateText" class="form-label">开始日期文本</label>
                                    <input type="text" class="form-control" id="editStartDateText">
                                </div>
                                <div class="col-md-6">
                                    <label for="editEndDateText" class="form-label">结束日期文本</label>
                                    <input type="text" class="form-control" id="editEndDateText">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="editActionText" class="form-label">跳转说明</label>
                                    <input type="text" class="form-control" id="editActionText"
                                        placeholder="例如：立即申请、了解详情、前往官网等">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" id="editEnableWebview">
                                        <label class="form-check-label" for="editEnableWebview">
                                            启用Webview打开
                                        </label>
                                        <div class="form-text">勾选后将在应用内使用webview打开链接</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 跳转链接配置 -->
                            <div class="card mb-3">
                                <div class="card-header py-2">
                                    <strong>跳转链接配置</strong>
                                    <small class="text-muted ms-2">可手动输入或从活动中选择自动生成</small>
                                </div>
                                <div class="card-body">
                                    <!-- 活动搜索 -->
                                    <div class="mb-3">
                                        <label class="form-label">从活动生成链接 <span class="text-muted">(可选)</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="editCampaignSearch" placeholder="输入活动名称搜索...">
                                            <button class="btn btn-outline-secondary" type="button" onclick="searchCampaignsForOffer('edit')">
                                                <i class="fas fa-search"></i> 搜索
                                            </button>
                                        </div>
                                        <div id="editCampaignSearchResults" class="mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                                        <div id="editSelectedCampaignInfo" class="mt-2" style="display: none;">
                                            <div class="alert alert-info py-2 mb-0">
                                                <small><i class="fas fa-check-circle me-1"></i>已选择活动: <span id="editSelectedCampaignName"></span></small>
                                                <button type="button" class="btn-close btn-sm float-end" onclick="clearSelectedCampaignForOffer('edit')"></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="editLinkH5" class="form-label">H5链接</label>
                                            <input type="text" class="form-control" id="editLinkH5" placeholder="例如：https://... 或 /campaign/xxx">
                                            <div class="form-text">H5环境下点击跳转的目标地址</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="editLinkMiniapp" class="form-label">小程序链接</label>
                                            <input type="text" class="form-control" id="editLinkMiniapp" placeholder="例如：/campaign/detail/index?campaignId=xxx">
                                            <div class="form-text">微信小程序环境下点击跳转的目标路径</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 富文本字段 -->
                            <div class="mb-3">
                                <label class="form-label">奖励详情</label>
                                <div id="editRewardDetailEditor"></div>
                                <input type="hidden" id="editRewardDetail">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">商户描述</label>
                                <div id="editMerchantDescriptionEditor"></div>
                                <input type="hidden" id="editMerchantDescription">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">如何兑换</label>
                                <div id="editHowToRedeemEditor"></div>
                                <input type="hidden" id="editHowToRedeem">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">条款和条件</label>
                                <div id="editTermsAndConditionsEditor"></div>
                                <input type="hidden" id="editTermsAndConditions">
                            </div>

                            <!-- 白名单用户管理 -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-label">白名单用户</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <!-- 全局白名单控制 -->
                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="editOfferGlobalWhitelist" onchange="updateWhitelistConfig('editOffer')">
                                                    <label class="form-check-label" for="editOfferGlobalWhitelist">
                                                        启用全局白名单
                                                    </label>
                                                    <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此礼遇</small>
                                                </div>
                                            </div>

                                            <!-- 手机号输入 -->
                                            <div class="mb-3">
                                                <label class="form-label small">添加手机号到白名单</label>
                                                <div class="input-group input-group-sm mb-2">
                                                    <input type="text" class="form-control" id="editOfferPhoneInput"
                                                        placeholder="输入11位手机号后按回车添加"
                                                        pattern="1[3-9]\d{9}"
                                                        onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('editOffer', this.value); this.value=''; event.preventDefault();}">
                                                    <button type="button" class="btn btn-outline-secondary"
                                                        onclick="const input=document.getElementById('editOfferPhoneInput'); addPhoneToWhitelist('editOffer', input.value); input.value='';">添加</button>
                                                </div>
                                            </div>
                                            <div id="editOfferWhitelistTags" class="mb-2">
                                                <!-- 白名单用户标签会在这里显示 -->
                                            </div>
                                            <small class="text-muted">留空表示所有用户都可见此礼遇</small>
                                        </div>
                                    </div>
                                    <textarea class="form-control mt-2" id="editOfferWhitelist" rows="3"
                                        style="display: none;" placeholder="JSON格式的白名单配置"></textarea>
                                    <button type="button" class="btn btn-sm btn-secondary mt-2"
                                        onclick="toggleWhitelistJson('editOffer')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveOffer()">保存</button>
                    </div>
                </div>
            </div>
        </div>
            <!-- Hero Contents标签页 -->
            <div class="tab-pane fade" id="hero-contents-pane" role="tabpanel">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0"><i class="fas fa-star me-2"></i>Hero Contents管理</h5>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createHeroModal">
                        <i class="fas fa-plus me-2"></i>添加Hero Content
                    </button>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="heroContentsTable">
                                <thead>
                                    <tr>
                                        <th style="width: 60px;">ID</th>
                                        <th style="width: 80px;">类型</th>
                                        <th style="width: 100px;">关联ID</th>
                                        <th style="width: 250px;">标题</th>
                                        <th style="width: 100px;">Banner图</th>
                                        <th style="width: 100px;">Cover图</th>
                                        <th style="width: 60px;">排序</th>
                                        <th style="width: 80px;">状态</th>
                                        <th style="width: 100px;">白名单</th>
                                        <th style="width: 120px;">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="heroContentsTableBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 办卡专区标签页 -->
            <div class="tab-pane fade" id="makes-pane" role="tabpanel">
                <div class="card mb-3">
                    <div class="card-body py-2">
                        <div class="row g-2 align-items-center">
                            <div class="col-auto">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" id="makeSearchInput" placeholder="搜索卡名称、发卡行..." style="width:180px">
                                    <button class="btn btn-outline-secondary" type="button" onclick="loadMakes()"><i class="fas fa-search"></i></button>
                                </div>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="makeIssuerFilter" onchange="loadMakes()" style="width:130px">
                                    <option value="">全部发卡行</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="makeCardTypeFilter" onchange="loadMakes()" style="width:120px">
                                    <option value="">全部卡类型</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="makeCardProductFilter" onchange="loadMakes()" style="width:120px">
                                    <option value="">全部卡等级</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="makeStatusFilter" onchange="loadMakes()" style="width:80px">
                                    <option value="">状态</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="makePerPageSelect" onchange="loadMakes()" style="width:100px">
                                    <option value="20">每页20条</option>
                                    <option value="50">每页50条</option>
                                    <option value="100">每页100条</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadMakes()"><i class="fas fa-sync-alt"></i></button>
                            </div>
                            <div class="col-auto ms-auto">
                                <button type="button" class="btn btn-success btn-sm" onclick="showMakeModal()"><i class="fas fa-plus me-1"></i>添加卡片</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="makesTable">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:50px">ID</th>
                                        <th style="width:90px">缩略图</th>
                                        <th>卡名称</th>
                                        <th style="width:100px">发卡行</th>
                                        <th style="width:100px">卡类型</th>
                                        <th style="width:80px">卡等级</th>
                                        <th style="width:150px">卡片主题</th>
                                        <th style="width:60px">优先级</th>
                                        <th style="width:60px">状态</th>
                                        <th style="width:80px">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="makesTableBody"></tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center p-3 border-top">
                            <small class="text-muted" id="makesPaginationInfo"></small>
                            <ul class="pagination pagination-sm mb-0" id="makesPagination"></ul>
                        </div>
                        <div id="makesLoadingIndicator" class="text-center py-4" style="display:none">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- 关闭 tab-content -->
    </div><!-- 关闭 container-fluid -->

    <!-- 创建/编辑卡片模态框 -->
    <div class="modal fade" id="makeModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="makeModalTitle">添加卡片</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="makeForm">
                        <input type="hidden" id="makeId">

                        <!-- 基本信息 -->
                        <h6 class="border-bottom pb-2 mb-3">基本信息</h6>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="makeIssuerSelect" class="form-label">发卡行 <span class="text-danger">*</span></label>
                                <select class="form-select" id="makeIssuerSelect" required>
                                    <option value="">请选择发卡行...</option>
                                </select>
                                <input type="hidden" id="makeIssuerCode">
                                <input type="hidden" id="makeIssuerName">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="makeCode" class="form-label">卡产品代码</label>
                                <input type="text" class="form-control" id="makeCode">
                            </div>
                            <div class="col-md-6">
                                <label for="makeName" class="form-label">卡名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="makeName" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="makeSubtitle" class="form-label">卡片副标题</label>
                                <input type="text" class="form-control" id="makeSubtitle">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="makeCardType" class="form-label">卡类型</label>
                                <select class="form-select" id="makeCardType">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="makeCardProduct" class="form-label">卡等级</label>
                                <select class="form-select" id="makeCardProduct">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="makeStatus" class="form-label">状态 <span class="text-danger">*</span></label>
                                <select class="form-select" id="makeStatus" required>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="makePriority" class="form-label">优先级</label>
                                <input type="number" class="form-control" id="makePriority" min="0" value="0">
                                <div class="form-text">数字越大排越前</div>
                            </div>
                        </div>

                        <!-- 卡片主题 -->
                        <div class="mb-3">
                            <label class="form-label">卡片主题</label>
                            <div class="form-text mb-2">可多选</div>
                            <div class="dropdown w-100">
                                <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
                                        type="button" id="makeTopicsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span id="makeTopicsDisplay">请选择卡片主题...</span>
                                </button>
                                <ul class="dropdown-menu w-100" id="makeTopicsDropdownMenu" aria-labelledby="makeTopicsDropdown" onclick="event.stopPropagation()" style="max-height: 300px; overflow-y: auto;">
                                    <!-- 主题选项将通过JS加载 -->
                                </ul>
                            </div>
                        </div>

                        <!-- 图片管理 -->
                        <h6 class="border-bottom pb-2 mb-3 mt-4">图片管理</h6>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">缩略图</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="makeThumbnailPreview" class="border rounded mb-2"
                                            style="width: 160px; height: 100px; object-fit: cover; display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="makeThumbnailFile" accept="image/*"
                                                onchange="uploadMakeImage(this, 'makeThumbnailUrl', 'makeThumbnailPreview')">
                                            <input type="url" class="form-control" id="makeThumbnailUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewMakeImage(this.value, 'makeThumbnailPreview')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">卡面图片</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="makeCardArtPreview" class="border rounded mb-2"
                                            style="width: 160px; height: 100px; object-fit: cover; display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="makeCardArtFile" accept="image/*"
                                                onchange="uploadMakeImage(this, 'makeCardArtUrl', 'makeCardArtPreview')">
                                            <input type="url" class="form-control" id="makeCardArtUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewMakeImage(this.value, 'makeCardArtPreview')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 详细描述 -->
                        <h6 class="border-bottom pb-2 mb-3 mt-4">详细描述</h6>
                        <div class="mb-3">
                            <label for="makeDescription" class="form-label">产品介绍</label>
                            <textarea class="form-control" id="makeDescription" rows="3"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="makeBenefitDescription" class="form-label">权益介绍</label>
                            <textarea class="form-control" id="makeBenefitDescription" rows="3"></textarea>
                        </div>

                        <!-- 办卡链接 -->
                        <h6 class="border-bottom pb-2 mb-3 mt-4">办卡链接</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="makeActionText" class="form-label">按钮文字</label>
                                <input type="text" class="form-control" id="makeActionText" placeholder="如：立即申请">
                            </div>
                            <div class="col-md-4">
                                <label for="makeExternalUrl" class="form-label">办卡跳转链接</label>
                                <input type="url" class="form-control" id="makeExternalUrl" placeholder="https://...">
                            </div>
                            <div class="col-md-4">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="makeEnableWebview">
                                    <label class="form-check-label" for="makeEnableWebview">
                                        启用Webview打开
                                    </label>
                                    <div class="form-text">勾选后将在应用内使用webview打开链接</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveMake()">
                        <i class="fas fa-save me-2"></i>保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建Hero Content模态框 -->
    <div class="modal fade" id="createHeroModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加Hero Content</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createHeroForm">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="createHeroType" class="form-label">类型 <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="createHeroType" onchange="onHeroTypeChange('create')">
                                    <option value="offer">礼遇</option>
                                    <option value="landing-page">Landing Page</option>
                                    <option value="tab-page">Tab Page</option>
                                    <option value="path">小程序路径</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="createHeroSortOrder" class="form-label">排序</label>
                                <input type="number" class="form-control" id="createHeroSortOrder" value="0">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <label for="createHeroTitle" class="form-label">标题 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createHeroTitle" required>
                            </div>
                        </div>

                        <!-- 礼遇选择区域 -->
                        <div class="row mt-3" id="createOfferSection">
                            <div class="col-12">
                                <label for="createHeroOfferId" class="form-label">选择礼遇 <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="createHeroOfferId">
                                    <option value="">请选择...</option>
                                </select>
                            </div>
                        </div>

                        <!-- Landing Page图片上传区域 -->
                        <div class="row mt-3" id="createLandingPageSection" style="display: none;">
                            <div class="col-md-6">
                                <label for="createHeroContentId" class="form-label">页面标识 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createHeroContentId"
                                    placeholder="例如: ceb202507">
                            </div>
                        </div>

                        <div class="row mt-3" id="createImageUploadSection" style="display: none;">
                            <div class="col-md-6">
                                <label class="form-label">Banner图片</label>
                                <div class="mb-2">
                                    <img id="createHeroBannerPreview" class="border rounded"
                                        style="display: none; width: 200px; height: auto;">
                                </div>
                                <div class="d-grid gap-2">
                                    <input type="file" class="form-control" id="createHeroBannerFile" accept="image/*,.svg"
                                        onchange="uploadHeroLandingPageImage(this, 'banner', 'create')">
                                    <input type="url" class="form-control" id="createHeroBannerUrl"
                                        placeholder="或输入Banner图片URL" readonly>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-danger btn-sm"
                                            id="createHeroBannerDeleteBtn" style="display: none;"
                                            onclick="clearHeroImage('createHeroBanner')">
                                            <i class="fas fa-trash"></i> 清除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Cover图片</label>
                                <div class="mb-2">
                                    <img id="createHeroCoverPreview" class="border rounded"
                                        style="display: none; width: 200px; height: auto;">
                                </div>
                                <div class="d-grid gap-2">
                                    <input type="file" class="form-control" id="createHeroCoverFile" accept="image/*,.svg"
                                        onchange="uploadHeroLandingPageImage(this, 'cover', 'create')">
                                    <input type="url" class="form-control" id="createHeroCoverUrl"
                                        placeholder="或输入Cover图片URL" readonly>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-danger btn-sm"
                                            id="createHeroCoverDeleteBtn" style="display: none;"
                                            onclick="clearHeroImage('createHeroCover')">
                                            <i class="fas fa-trash"></i> 清除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 白名单用户管理 -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-label">白名单用户</label>
                                <div class="card">
                                    <div class="card-body">
                                        <!-- 全局白名单控制 -->
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="createHeroGlobalWhitelist" onchange="updateWhitelistConfig('createHero')">
                                                <label class="form-check-label" for="createHeroGlobalWhitelist">
                                                    启用全局白名单
                                                </label>
                                                <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此内容</small>
                                            </div>
                                        </div>

                                        <!-- 手机号输入 -->
                                        <div class="mb-3">
                                            <label class="form-label small">添加手机号到白名单</label>
                                            <div class="input-group input-group-sm mb-2">
                                                <input type="text" class="form-control" id="createHeroPhoneInput"
                                                    placeholder="输入11位手机号后按回车添加"
                                                    pattern="1[3-9]\d{9}"
                                                    onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('createHero', this.value); this.value=''; event.preventDefault();}">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    onclick="const input=document.getElementById('createHeroPhoneInput'); addPhoneToWhitelist('createHero', input.value); input.value='';">添加</button>
                                            </div>
                                        </div>
                                        <div id="createHeroWhitelistTags" class="mb-2">
                                            <!-- 白名单用户标签会在这里显示 -->
                                        </div>
                                        <small class="text-muted">留空表示所有用户都可见此内容</small>
                                    </div>
                                </div>
                                <textarea class="form-control mt-2" id="createHeroWhitelist" rows="3"
                                    style="display: none;" placeholder="JSON格式的白名单配置"></textarea>
                                <button type="button" class="btn btn-sm btn-secondary mt-2"
                                    onclick="toggleWhitelistJson('createHero')">
                                    <i class="fas fa-code"></i> 查看/编辑JSON
                                </button>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="createHeroIsActive" checked>
                                    <label class="form-check-label" for="createHeroIsActive">启用</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" onclick="createHeroContent()">创建</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑Hero Content模态框 -->
    <div class="modal fade" id="editHeroModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑Hero Content</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editHeroForm">
                        <input type="hidden" id="editHeroId">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="editHeroType" class="form-label">类型 <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="editHeroType" onchange="onHeroTypeChange('edit')">
                                    <option value="offer">礼遇</option>
                                    <option value="landing-page">Landing Page</option>
                                    <option value="tab-page">Tab Page</option>
                                    <option value="path">小程序路径</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="editHeroSortOrder" class="form-label">排序</label>
                                <input type="number" class="form-control" id="editHeroSortOrder">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <label for="editHeroTitle" class="form-label">标题 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editHeroTitle" required>
                            </div>
                        </div>

                        <!-- 礼遇选择区域 -->
                        <div class="row mt-3" id="editOfferSection">
                            <div class="col-12">
                                <label for="editHeroOfferId" class="form-label">选择礼遇 <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="editHeroOfferId">
                                    <option value="">请选择...</option>
                                </select>
                            </div>
                        </div>

                        <!-- Landing Page图片上传区域 -->
                        <div class="row mt-3" id="editLandingPageSection" style="display: none;">
                            <div class="col-md-6">
                                <label for="editHeroContentId" class="form-label">页面标识 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editHeroContentId"
                                    placeholder="例如: ceb202507">
                            </div>
                        </div>

                        <div class="row mt-3" id="editImageUploadSection" style="display: none;">
                            <div class="col-md-6">
                                <label class="form-label">Banner图片</label>
                                <div class="mb-2">
                                    <img id="editHeroBannerPreview" class="border rounded"
                                        style="display: none; width: 200px; height: auto;">
                                </div>
                                <div class="d-grid gap-2">
                                    <input type="file" class="form-control" id="editHeroBannerFile" accept="image/*,.svg"
                                        onchange="uploadHeroLandingPageImage(this, 'banner', 'edit')">
                                    <input type="url" class="form-control" id="editHeroBannerUrl"
                                        placeholder="或输入Banner图片URL" readonly>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-danger btn-sm"
                                            id="editHeroBannerDeleteBtn" style="display: none;"
                                            onclick="clearHeroImage('editHeroBanner')">
                                            <i class="fas fa-trash"></i> 清除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Cover图片</label>
                                <div class="mb-2">
                                    <img id="editHeroCoverPreview" class="border rounded"
                                        style="display: none; width: 200px; height: auto;">
                                </div>
                                <div class="d-grid gap-2">
                                    <input type="file" class="form-control" id="editHeroCoverFile" accept="image/*,.svg"
                                        onchange="uploadHeroLandingPageImage(this, 'cover', 'edit')">
                                    <input type="url" class="form-control" id="editHeroCoverUrl"
                                        placeholder="或输入Cover图片URL" readonly>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-danger btn-sm"
                                            id="editHeroCoverDeleteBtn" style="display: none;"
                                            onclick="clearHeroImage('editHeroCover')">
                                            <i class="fas fa-trash"></i> 清除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 白名单用户管理 -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-label">白名单用户</label>
                                <div class="card">
                                    <div class="card-body">
                                        <!-- 全局白名单控制 -->
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="editHeroGlobalWhitelist" onchange="updateWhitelistConfig('editHero')">
                                                <label class="form-check-label" for="editHeroGlobalWhitelist">
                                                    启用全局白名单
                                                </label>
                                                <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此内容</small>
                                            </div>
                                        </div>

                                        <!-- 手机号输入 -->
                                        <div class="mb-3">
                                            <label class="form-label small">添加手机号到白名单</label>
                                            <div class="input-group input-group-sm mb-2">
                                                <input type="text" class="form-control" id="editHeroPhoneInput"
                                                    placeholder="输入11位手机号后按回车添加"
                                                    pattern="1[3-9]\d{9}"
                                                    onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('editHero', this.value); this.value=''; event.preventDefault();}">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    onclick="const input=document.getElementById('editHeroPhoneInput'); addPhoneToWhitelist('editHero', input.value); input.value='';">添加</button>
                                            </div>
                                        </div>
                                        <div id="editHeroWhitelistTags" class="mb-2">
                                            <!-- 白名单用户标签会在这里显示 -->
                                        </div>
                                        <small class="text-muted">留空表示所有用户都可见此内容</small>
                                    </div>
                                </div>
                                <textarea class="form-control mt-2" id="editHeroWhitelist" rows="3"
                                    style="display: none;" placeholder="JSON格式的白名单配置"></textarea>
                                <button type="button" class="btn btn-sm btn-secondary mt-2"
                                    onclick="toggleWhitelistJson('editHero')">
                                    <i class="fas fa-code"></i> 查看/编辑JSON
                                </button>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="editHeroIsActive">
                                    <label class="form-check-label" for="editHeroIsActive">启用</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateHeroContent()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS already loaded in layout -->

    <!-- 动态加载jQuery和Summernote -->
    <script>
        // 动态加载脚本的函数
        function loadScript(src, callback) {
            const script = document.createElement('script');
            script.src = src;
            script.onload = callback;
            script.onerror = function() {
                console.error('Failed to load script:', src);
            };
            document.head.appendChild(script);
        }

        // 确保jQuery加载
        function ensureJQuery(callback) {
            if (typeof jQuery === 'undefined') {
                console.log('Loading jQuery...');
                loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
                    console.log('jQuery loaded successfully');
                    callback();
                });
            } else {
                console.log('jQuery already loaded');
                callback();
            }
        }

        // 加载Summernote
        function loadSummernote(callback) {
            console.log('Loading Summernote...');
            loadScript('https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js', function() {
                console.log('Summernote loaded');
                loadScript('https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-zh-CN.min.js', function() {
                    console.log('Summernote Chinese language loaded');
                    callback();
                });
            });
        }

        // 初始化加载链
        window.initializeSummernoteLibraries = function(callback) {
            ensureJQuery(function() {
                loadSummernote(callback);
            });
        };
    </script>

    <script>
        let currentPage = 1;
        let perPage = 50;
        let searchQuery = '';
        let filters = {
            topics: [],
            regions: [],
            tags: [],      // 分类筛选（原 scenarios 改为 tags）
            levels: [],    // 适用卡等级（改为数组支持多选）
            is_hero: '',
            is_vmorc: '',
            has_thumbnail: '',
            has_banner: '',
            has_banner_cover: '',
            has_brand_logo: '',
            has_detail_image: '',
            status: '1' // 默认只显示启用的礼遇
        };

        // Summernote编辑器实例存储
        const summernoteEditors = {};

        // 上传中的文件追踪（防止重复上传）
        const uploadingFiles = new Set();

        // 粘贴操作标志（防止onPaste后立即触发onImageUpload）
        let isPasteOperationInProgress = false;

        // 初始化Summernote富文本编辑器
        function initializeSummernoteEditors() {
            console.log('开始初始化Summernote编辑器...');

            const fields = [
                'RewardDetail',
                'MerchantDescription',
                'HowToRedeem',
                'TermsAndConditions'
            ];
            const prefixes = ['edit', 'create'];

            prefixes.forEach(prefix => {
                fields.forEach(field => {
                    const editorId = prefix + field + 'Editor';
                    const hiddenInputId = prefix + field;

                    const $editor = jQuery('#' + editorId);

                    // 检查元素是否存在
                    if ($editor.length === 0) {
                        console.warn('编辑器元素不存在:', editorId);
                        return;
                    }

                    try {
                        $editor.summernote({
                            lang: 'zh-CN',
                            height: 150,
                            minHeight: 100,
                            placeholder: '请输入内容...',

                            // 工具栏配置
                            toolbar: [
                                ['style', ['style']],
                                ['font', ['bold', 'italic', 'underline', 'clear']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['table', ['table']],
                                ['insert', ['link', 'picture', 'video']],
                                ['view', ['fullscreen', 'codeview', 'help']]
                            ],

                            // 图片上传配置
                            callbacks: {
                                onChange: function(contents, $editable) {
                                    // 同步内容到隐藏输入框
                                    const hiddenInput = document.getElementById(hiddenInputId);
                                    if (hiddenInput) {
                                        hiddenInput.value = contents;
                                    }
                                },
                                onImageUpload: function(files) {
                                    // 检查是否正在进行粘贴操作
                                    if (isPasteOperationInProgress) {
                                        console.log('粘贴操作正在进行中，跳过onImageUpload [' + editorId + ']');
                                        return;
                                    }

                                    // 处理图片上传
                                    console.log('onImageUpload 触发 [' + editorId + ']，文件数量:', files.length);
                                    for (let i = 0; i < files.length; i++) {
                                        console.log('onImageUpload 处理文件 [' + editorId + ']:', files[i].name, '大小:', files[i].size);
                                        uploadImageToOSS(files[i], this, editorId);
                                    }
                                },
                                onPaste: function(e) {
                                    // 处理粘贴事件，支持图片粘贴
                                    console.log('onPaste 触发 [' + editorId + ']');
                                    const clipboardData = e.originalEvent.clipboardData;
                                    if (clipboardData && clipboardData.items) {
                                        const items = clipboardData.items;
                                        let hasImage = false;

                                        console.log('剪贴板项目数量 [' + editorId + ']:', items.length);
                                        for (let i = 0; i < items.length; i++) {
                                            console.log('剪贴板项目 [' + editorId + ']', i, '类型:', items[i].type);
                                            if (items[i].type.indexOf('image') !== -1) {
                                                hasImage = true;
                                                const file = items[i].getAsFile();
                                                console.log('onPaste 处理图片文件 [' + editorId + ']:', file.name, '大小:', file.size);

                                                // 设置粘贴操作标志
                                                isPasteOperationInProgress = true;
                                                uploadImageToOSS(file, this, editorId);

                                                // 500ms后清除标志
                                                setTimeout(() => {
                                                    isPasteOperationInProgress = false;
                                                    console.log('粘贴操作标志已清除');
                                                }, 500);
                                            }
                                        }

                                        // 如果有图片，阻止默认粘贴行为
                                        if (hasImage) {
                                            console.log('阻止默认粘贴行为 [' + editorId + ']');
                                            e.preventDefault();
                                            return false;
                                        }
                                    }
                                }
                            },

                            // 表格相关配置
                            tableClassName: 'table table-bordered',

                            // 字体设置
                            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', '微软雅黑', '宋体', '黑体', '楷体'],
                            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48']
                        });

                        // 保存编辑器实例
                        summernoteEditors[editorId] = $editor;
                        console.log('初始化成功:', editorId);
                    } catch (error) {
                        console.error('初始化编辑器失败:', editorId, error);
                    }
                });
            });
        }

        // 图片上传到OSS的函数
        function uploadImageToOSS(file, editor, editorId) {
            // 生成文件唯一标识符
            const fileId = file.name + '_' + file.size + '_' + file.lastModified;
            console.log('uploadImageToOSS 被调用 [' + (editorId || 'unknown') + ']，文件ID:', fileId);
            console.log('当前上传中的文件数量:', uploadingFiles.size);

            // 检查是否正在上传
            if (uploadingFiles.has(fileId)) {
                console.log('文件正在上传中，跳过重复上传:', file.name);
                return;
            }

            // 标记为上传中
            uploadingFiles.add(fileId);
            console.log('标记文件为上传中，当前上传队列:', Array.from(uploadingFiles));

            const formData = new FormData();
            formData.append('image', file);

            // 使用与活动管理相同的上传端点
            console.log('正在上传图片到:', '/admin/campaigns/upload-image');

            fetch('/admin/campaigns/upload-image', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                credentials: 'include'
            })
            .then(response => response.json())
            .then(result => {
                // 无论成功失败都从追踪集合中移除
                uploadingFiles.delete(fileId);

                if (result.success) {
                    // 插入图片到编辑器
                    jQuery(editor).summernote('insertImage', result.url);
                    console.log('图片上传成功:', result.url);
                } else {
                    console.error('图片上传失败:', result.message);
                    alert('图片上传失败: ' + (result.message || '未知错误'));
                }
            })
            .catch(error => {
                // 上传失败时也要从追踪集合中移除
                uploadingFiles.delete(fileId);
                console.error('图片上传错误:', error);
                alert('图片上传失败，请重试');
            });
        }

        // CSRF token setup (disabled for admin routes)
        // const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // MD5 实现（用于生成 oid 预览）
        function md5(string) {
            function rotateLeft(value, shift) {
                return (value << shift) | (value >>> (32 - shift));
            }
            function addUnsigned(x, y) {
                const x8 = (x & 0x80000000);
                const y8 = (y & 0x80000000);
                const x4 = (x & 0x40000000);
                const y4 = (y & 0x40000000);
                const result = (x & 0x3FFFFFFF) + (y & 0x3FFFFFFF);
                if (x4 & y4) return (result ^ 0x80000000 ^ x8 ^ y8);
                if (x4 | y4) {
                    if (result & 0x40000000) return (result ^ 0xC0000000 ^ x8 ^ y8);
                    else return (result ^ 0x40000000 ^ x8 ^ y8);
                } else return (result ^ x8 ^ y8);
            }
            function F(x, y, z) { return (x & y) | ((~x) & z); }
            function G(x, y, z) { return (x & z) | (y & (~z)); }
            function H(x, y, z) { return (x ^ y ^ z); }
            function I(x, y, z) { return (y ^ (x | (~z))); }
            function FF(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }
            function GG(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }
            function HH(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }
            function II(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }
            function convertToWordArray(string) {
                let messageLength = string.length;
                let numberOfWords = (((messageLength + 8) - ((messageLength + 8) % 64)) / 64 + 1) * 16;
                let wordArray = Array(numberOfWords - 1);
                let bytePosition = 0;
                let byteCount = 0;
                while (byteCount < messageLength) {
                    let wordCount = (byteCount - (byteCount % 4)) / 4;
                    bytePosition = (byteCount % 4) * 8;
                    wordArray[wordCount] = (wordArray[wordCount] | (string.charCodeAt(byteCount) << bytePosition));
                    byteCount++;
                }
                let wordCount = (byteCount - (byteCount % 4)) / 4;
                bytePosition = (byteCount % 4) * 8;
                wordArray[wordCount] = wordArray[wordCount] | (0x80 << bytePosition);
                wordArray[numberOfWords - 2] = messageLength << 3;
                wordArray[numberOfWords - 1] = messageLength >>> 29;
                return wordArray;
            }
            function wordToHex(value) {
                let hex = '', temp = '';
                for (let count = 0; count <= 3; count++) {
                    temp = (value >>> (count * 8)) & 255;
                    hex = hex + (('0' + temp.toString(16)).slice(-2));
                }
                return hex;
            }
            function utf8Encode(string) {
                string = string.replace(/\r\n/g, '\n');
                let utf8 = '';
                for (let n = 0; n < string.length; n++) {
                    let c = string.charCodeAt(n);
                    if (c < 128) {
                        utf8 += String.fromCharCode(c);
                    } else if (c > 127 && c < 2048) {
                        utf8 += String.fromCharCode((c >> 6) | 192);
                        utf8 += String.fromCharCode((c & 63) | 128);
                    } else {
                        utf8 += String.fromCharCode((c >> 12) | 224);
                        utf8 += String.fromCharCode(((c >> 6) & 63) | 128);
                        utf8 += String.fromCharCode((c & 63) | 128);
                    }
                }
                return utf8;
            }
            let x = [];
            let k, AA, BB, CC, DD, a, b, c, d;
            const S11 = 7, S12 = 12, S13 = 17, S14 = 22;
            const S21 = 5, S22 = 9, S23 = 14, S24 = 20;
            const S31 = 4, S32 = 11, S33 = 16, S34 = 23;
            const S41 = 6, S42 = 10, S43 = 15, S44 = 21;
            string = utf8Encode(string);
            x = convertToWordArray(string);
            a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
            for (k = 0; k < x.length; k += 16) {
                AA = a; BB = b; CC = c; DD = d;
                a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478); d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
                c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB); b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
                a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF); d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
                c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613); b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
                a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8); d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
                c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1); b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
                a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122); d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
                c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E); b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
                a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562); d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
                c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51); b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
                a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D); d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
                c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681); b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
                a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6); d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
                c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87); b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
                a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905); d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
                c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9); b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
                a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942); d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
                c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122); b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
                a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44); d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
                c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60); b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
                a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6); d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
                c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085); b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
                a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039); d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
                c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8); b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
                a = II(a, b, c, d, x[k + 0], S41, 0xF4292244); d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
                c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7); b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
                a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3); d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
                c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D); b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
                a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F); d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
                c = II(c, d, a, b, x[k + 6], S43, 0xA3014314); b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
                a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82); d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
                c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB); b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
                a = addUnsigned(a, AA); b = addUnsigned(b, BB); c = addUnsigned(c, CC); d = addUnsigned(d, DD);
            }
            return (wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d)).toLowerCase();
        }

        // 生成 OID
        function generateOid(title) {
            if (!title) return '';
            return 'offer_' + md5(title).substring(0, 12);
        }

        // 更新 OID 预览
        function updateOidPreview() {
            const title = document.getElementById('editTitle').value;
            const currentOid = document.getElementById('editOid').value;
            const previewBadge = document.getElementById('oidPreviewBadge');
            const previewText = document.getElementById('oidPreviewText');

            if (title && title !== window.originalEditTitle) {
                const newOid = generateOid(title);
                if (newOid !== currentOid) {
                    previewText.textContent = newOid;
                    previewBadge.style.display = 'flex';
                } else {
                    previewBadge.style.display = 'none';
                }
            } else {
                previewBadge.style.display = 'none';
            }
        }

        // 标签页缓存相关
        const TAB_CACHE_KEY = 'offer_admin_active_tab';
        const TAB_CACHE_NOTICE_KEY = 'offer_admin_tab_cache_notice_shown';
        let isPageInitializing = true; // 标记页面是否正在初始化

        // 保存活跃标签页到localStorage
        function saveActiveTab(tabId) {
            localStorage.setItem(TAB_CACHE_KEY, tabId);
        }

        // 从localStorage读取活跃标签页
        function getActiveTab() {
            return localStorage.getItem(TAB_CACHE_KEY) || 'offers-tab';
        }

        // 激活指定标签页
        function activateTab(tabId) {
            const tabButton = document.getElementById(tabId);
            const tab = new bootstrap.Tab(tabButton);
            tab.show();
        }

        // 清除标签页缓存（开发者工具函数）
        function clearTabCache() {
            localStorage.removeItem(TAB_CACHE_KEY);
            console.log('标签页缓存已清除，刷新页面将回到默认的礼遇列表标签页');
        }

        // 显示当前标签页缓存状态（开发者工具函数）
        function showTabCacheStatus() {
            const savedTab = getActiveTab();
            console.log(`当前缓存的标签页: ${savedTab}`);
            return savedTab;
        }

        // 显示标签页缓存功能提示（仅首次）
        function showTabCacheNotice() {
            const noticeShown = localStorage.getItem(TAB_CACHE_NOTICE_KEY);
            if (!noticeShown) {
                // 创建一个小的提示消息
                const notification = document.createElement('div');
                notification.className = 'alert alert-info alert-dismissible fade show position-fixed';
                notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 350px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
                notification.innerHTML = `
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>提示：</strong>标签页状态已保存，刷新页面后会保持在当前标签页。
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.body.appendChild(notification);

                // 标记提示已显示
                localStorage.setItem(TAB_CACHE_NOTICE_KEY, 'true');

                // 5秒后自动隐藏
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.remove();
                    }
                }, 5000);
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 动态加载所需库并初始化Summernote富文本编辑器
            window.initializeSummernoteLibraries(function() {
                console.log('所有库加载完成，开始初始化编辑器');
                setTimeout(() => {
                    initializeSummernoteEditors();
                }, 500);
            });

            // 从缓存恢复活跃标签页
            const savedTab = getActiveTab();
            activateTab(savedTab);

            // 根据活跃标签页加载相应数据
            if (savedTab === 'offers-tab') {
                loadOffers();
                loadOfferCounts();
            } else if (savedTab === 'hero-contents-tab') {
                // 对于Hero Contents标签页，手动加载数据
                const createOfferBtn = document.getElementById('createOfferBtn');
                createOfferBtn.style.display = 'none';
                // 延迟加载以确保DOM完全准备好
                setTimeout(() => {
                    loadHeroContents();
                    loadOffersForHero();
                }, 100);
            } else if (savedTab === 'makes-tab') {
                // 对于办卡专区标签页，手动加载数据
                const createOfferBtn = document.getElementById('createOfferBtn');
                createOfferBtn.style.display = 'none';
                // 延迟加载以确保DOM完全准备好
                setTimeout(() => {
                    loadMakeOptions();
                    loadMakes();
                }, 100);
            }

            // 监听标签页切换事件
            const offersTab = document.getElementById('offers-tab');
            const heroTab = document.getElementById('hero-contents-tab');
            const createOfferBtn = document.getElementById('createOfferBtn');

            offersTab.addEventListener('shown.bs.tab', function () {
                saveActiveTab('offers-tab');
                createOfferBtn.style.display = 'block';
                // 确保礼遇数据已加载
                if (!document.getElementById('offersTableBody').children.length) {
                    loadOffers();
                    loadOfferCounts();
                }
                // 显示缓存功能提示（仅在用户手动切换时）
                if (!isPageInitializing) {
                    showTabCacheNotice();
                }
            });

            heroTab.addEventListener('shown.bs.tab', function () {
                saveActiveTab('hero-contents-tab');
                createOfferBtn.style.display = 'none';
                loadHeroContents();
                loadOffersForHero();
                // 显示缓存功能提示（仅在用户手动切换时）
                if (!isPageInitializing) {
                    showTabCacheNotice();
                }
            });

            // 创建模态框显示时清空富文本编辑器和资格配置面板
            document.getElementById('createModal').addEventListener('shown.bs.modal', function () {
                // 清空所有创建表单的富文本编辑器
                if (summernoteEditors.createRewardDetailEditor) {
                    summernoteEditors.createRewardDetailEditor.summernote('code', '');
                }
                if (summernoteEditors.createMerchantDescriptionEditor) {
                    summernoteEditors.createMerchantDescriptionEditor.summernote('code', '');
                }
                if (summernoteEditors.createHowToRedeemEditor) {
                    summernoteEditors.createHowToRedeemEditor.summernote('code', '');
                }
                if (summernoteEditors.createTermsAndConditionsEditor) {
                    summernoteEditors.createTermsAndConditionsEditor.summernote('code', '');
                }

                // 重置资格配置面板
                document.getElementById('createOfferType').value = '';
                resetCreateEligibilityPanel();

                // 清空白名单
                initializeWhitelist('createOffer', {});
            });

            // 状态快速筛选事件
            document.querySelectorAll('input[name="statusQuickFilter"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.status = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 搜索功能
            document.getElementById('searchBtn').addEventListener('click', function () {
                searchQuery = document.getElementById('searchInput').value;
                currentPage = 1;
                loadOffers();
                loadOfferCounts();
            });

            // 回车搜索
            document.getElementById('searchInput').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    document.getElementById('searchBtn').click();
                }
            });

            // 每页条数改变
            document.getElementById('perPageSelect').addEventListener('change', function () {
                perPage = this.value;
                currentPage = 1;
                loadOffers();
            });

            // 刷新按钮
            document.getElementById('refreshBtn').addEventListener('click', function () {
                loadOffers();
                loadOfferCounts();
            });

            // 过滤器事件监听
            setupFilterListeners();

            // 清除所有过滤器按钮
            document.getElementById('clearFiltersBtn').addEventListener('click', function () {
                clearAllFilters();
            });

            // 更多筛选选项切换
            document.getElementById('toggleMoreFilters').addEventListener('click', function () {
                const moreSection = document.getElementById('moreFiltersSection');
                const icon = document.getElementById('moreFiltersIcon');

                if (moreSection.style.display === 'none') {
                    moreSection.style.display = 'block';
                    icon.className = 'fas fa-chevron-up me-1';
                    this.innerHTML = '<i class="fas fa-chevron-up me-1"></i>收起筛选选项';
                } else {
                    moreSection.style.display = 'none';
                    icon.className = 'fas fa-chevron-down me-1';
                    this.innerHTML = '<i class="fas fa-chevron-down me-1"></i>更多筛选选项';
                }
            });

            // Hero Content相关事件已通过onchange属性直接绑定到文件输入框

            // 页面初始化完成，标记为非初始化状态
            setTimeout(() => {
                isPageInitializing = false;
            }, 200);
        });

        // 设置过滤器事件监听
        function setupFilterListeners() {
            // Topics过滤器
            const topicsCheckboxes = document.querySelectorAll('#topicsFilter input[type="checkbox"]');
            topicsCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    if (this.value === '') { // "全部"选项
                        if (this.checked) {
                            // 取消其他所有选项
                            topicsCheckboxes.forEach(cb => {
                                if (cb.value !== '') cb.checked = false;
                            });
                            filters.topics = [];
                        }
                    } else {
                        // 取消"全部"选项
                        document.getElementById('topic_all').checked = false;
                        updateFiltersArray('topics', topicsCheckboxes);
                    }
                    currentPage = 1;
                    loadOffers();
                });
            });

            // Regions过滤器
            // 国家/地区筛选器（下拉多选）
            const regionFilterCheckboxes = document.querySelectorAll('.filter-region-checkbox');
            regionFilterCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    if (this.value === '') { // "全部"选项
                        if (this.checked) {
                            regionFilterCheckboxes.forEach(cb => {
                                if (cb.value !== '') cb.checked = false;
                            });
                            filters.regions = [];
                            document.getElementById('regionsFilterDisplay').textContent = '全部地区';
                        }
                    } else {
                        document.getElementById('filter_region_all').checked = false;
                        // 收集所有选中的地区
                        filters.regions = [];
                        regionFilterCheckboxes.forEach(cb => {
                            if (cb.checked && cb.value !== '') {
                                filters.regions.push(cb.value);
                            }
                        });
                        // 更新显示文本
                        if (filters.regions.length === 0) {
                            document.getElementById('filter_region_all').checked = true;
                            document.getElementById('regionsFilterDisplay').textContent = '全部地区';
                        } else if (filters.regions.length <= 2) {
                            document.getElementById('regionsFilterDisplay').textContent = filters.regions.join(', ');
                        } else {
                            document.getElementById('regionsFilterDisplay').textContent = filters.regions.slice(0, 2).join(', ') + ' +' + (filters.regions.length - 2);
                        }
                    }
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 分类筛选器（下拉多选）
            const tagFilterCheckboxes = document.querySelectorAll('.filter-tag-checkbox');
            tagFilterCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    if (this.value === '') { // "全部"选项
                        if (this.checked) {
                            tagFilterCheckboxes.forEach(cb => {
                                if (cb.value !== '') cb.checked = false;
                            });
                            filters.tags = [];
                            document.getElementById('tagsFilterDisplay').textContent = '全部分类';
                        }
                    } else {
                        document.getElementById('filter_tag_all').checked = false;
                        // 收集所有选中的分类
                        filters.tags = [];
                        tagFilterCheckboxes.forEach(cb => {
                            if (cb.checked && cb.value !== '') {
                                filters.tags.push(cb.value);
                            }
                        });
                        // 更新显示文本
                        if (filters.tags.length === 0) {
                            document.getElementById('filter_tag_all').checked = true;
                            document.getElementById('tagsFilterDisplay').textContent = '全部分类';
                        } else if (filters.tags.length <= 2) {
                            document.getElementById('tagsFilterDisplay').textContent = filters.tags.join(', ');
                        } else {
                            document.getElementById('tagsFilterDisplay').textContent = filters.tags.slice(0, 2).join(', ') + ' +' + (filters.tags.length - 2);
                        }
                    }
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 适用卡等级筛选器（下拉多选）
            const levelFilterCheckboxes = document.querySelectorAll('.filter-level-checkbox');
            levelFilterCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    if (this.value === '') { // "全部"选项
                        if (this.checked) {
                            levelFilterCheckboxes.forEach(cb => {
                                if (cb.value !== '') cb.checked = false;
                            });
                            filters.levels = [];
                            document.getElementById('levelFilterDisplay').textContent = '全部等级';
                        }
                    } else {
                        document.getElementById('filter_level_all').checked = false;
                        // 收集所有选中的等级
                        filters.levels = [];
                        levelFilterCheckboxes.forEach(cb => {
                            if (cb.checked && cb.value !== '') {
                                filters.levels.push(cb.value);
                            }
                        });
                        // 更新显示文本
                        if (filters.levels.length === 0) {
                            document.getElementById('filter_level_all').checked = true;
                            document.getElementById('levelFilterDisplay').textContent = '全部等级';
                        } else if (filters.levels.length <= 2) {
                            document.getElementById('levelFilterDisplay').textContent = filters.levels.join(', ');
                        } else {
                            document.getElementById('levelFilterDisplay').textContent = filters.levels.slice(0, 2).join(', ') + ' +' + (filters.levels.length - 2);
                        }
                    }
                    currentPage = 1;
                    loadOffers();
                });
            });

            // VMORC礼遇过滤器
            const isVmorcRadios = document.querySelectorAll('input[name="isVmorcFilter"]');
            isVmorcRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.is_vmorc = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 有缩略图过滤器
            const hasThumbnailRadios = document.querySelectorAll('input[name="hasThumbnailFilter"]');
            hasThumbnailRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.has_thumbnail = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 有首页大图过滤器
            const hasBannerRadios = document.querySelectorAll('input[name="hasBannerFilter"]');
            hasBannerRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.has_banner = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 有首页大图前景图过滤器
            const hasBannerCoverRadios = document.querySelectorAll('input[name="hasBannerCoverFilter"]');
            hasBannerCoverRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.has_banner_cover = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 有品牌Logo过滤器
            const hasBrandLogoRadios = document.querySelectorAll('input[name="hasBrandLogoFilter"]');
            hasBrandLogoRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.has_brand_logo = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });

            // 有详情图过滤器
            const hasDetailImageRadios = document.querySelectorAll('input[name="hasDetailImageFilter"]');
            hasDetailImageRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    filters.has_detail_image = this.value;
                    currentPage = 1;
                    loadOffers();
                });
            });
        }

        // 更新过滤器数组
        function updateFiltersArray(filterType, checkboxes) {
            filters[filterType] = [];
            checkboxes.forEach(cb => {
                if (cb.checked && cb.value !== '') {
                    filters[filterType].push(cb.value);
                }
            });
        }

        // 清除所有过滤器
        function clearAllFilters() {
            // 重置过滤器对象
            filters = {
                topics: [],
                regions: [],
                tags: [],
                levels: [],
                is_hero: '',
                is_vmorc: '',
                has_thumbnail: '',
                has_banner: '',
                has_banner_cover: '',
                has_brand_logo: '',
                has_detail_image: '',
                status: '1' // 重置为默认显示启用的礼遇
            };

            // 重置所有checkbox为未选中状态
            document.querySelectorAll('.btn-check').forEach(checkbox => {
                checkbox.checked = false;
            });
            // 重置下拉筛选器中的checkbox
            document.querySelectorAll('.filter-region-checkbox, .filter-tag-checkbox, .filter-level-checkbox').forEach(checkbox => {
                checkbox.checked = checkbox.value === '';
            });

            // 重置状态快速筛选为"启用的"
            document.getElementById('status_quick_active').checked = true;

            // 设置"全部"选项为选中状态
            document.getElementById('topic_all').checked = true;
            document.getElementById('filter_region_all').checked = true;
            document.getElementById('filter_tag_all').checked = true;
            document.getElementById('filter_level_all').checked = true;
            document.getElementById('is_hero_all').checked = true;
            document.getElementById('is_vmorc_all').checked = true;
            document.getElementById('has_thumbnail_all').checked = true;
            document.getElementById('has_banner_all').checked = true;
            document.getElementById('has_banner_cover_all').checked = true;
            document.getElementById('has_brand_logo_all').checked = true;
            document.getElementById('has_detail_image_all').checked = true;

            // 重置下拉筛选器显示文本
            document.getElementById('regionsFilterDisplay').textContent = '全部地区';
            document.getElementById('tagsFilterDisplay').textContent = '全部分类';
            document.getElementById('levelFilterDisplay').textContent = '全部等级';

            // 重置页码并重新加载
            currentPage = 1;
            loadOffers();
            loadOfferCounts();
        }

        // 加载礼遇统计数字
        function loadOfferCounts() {
            const params = new URLSearchParams();
            if (searchQuery) {
                params.append('search', searchQuery);
            }
            const url = '/api/admin/offers/counts' + (params.toString() ? '?' + params.toString() : '');

            fetch(url, {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('activeCount').textContent = data.data.active || 0;
                        document.getElementById('inactiveCount').textContent = data.data.inactive || 0;
                        document.getElementById('totalCount').textContent = data.data.total || 0;
                    }
                })
                .catch(error => {
                    console.error('Failed to load counts:', error);
                });
        }

        // 加载礼遇列表
        function loadOffers() {
            showLoading();

            const params = new URLSearchParams({
                page: currentPage,
                per_page: perPage,
                search: searchQuery
            });

            // 添加过滤参数
            if (filters.topics.length > 0) {
                filters.topics.forEach(topic => {
                    params.append('topics[]', topic);
                });
            }
            if (filters.regions.length > 0) {
                filters.regions.forEach(region => {
                    params.append('regions[]', region);
                });
            }
            if (filters.tags.length > 0) {
                filters.tags.forEach(tag => {
                    params.append('tags[]', tag);
                });
            }
            if (filters.levels.length > 0) {
                filters.levels.forEach(level => {
                    params.append('levels[]', level);
                });
            }
            if (filters.is_hero !== '') {
                params.append('is_hero', filters.is_hero);
            }
            if (filters.is_vmorc !== '') {
                params.append('is_vmorc', filters.is_vmorc);
            }
            if (filters.has_thumbnail !== '') {
                params.append('has_thumbnail', filters.has_thumbnail);
            }
            if (filters.has_banner !== '') {
                params.append('has_banner', filters.has_banner);
            }
            if (filters.has_banner_cover !== '') {
                params.append('has_banner_cover', filters.has_banner_cover);
            }
            if (filters.has_brand_logo !== '') {
                params.append('has_brand_logo', filters.has_brand_logo);
            }
            if (filters.has_detail_image !== '') {
                params.append('has_detail_image', filters.has_detail_image);
            }
            if (filters.status !== '') {
                params.append('status', filters.status);
            }

            adminFetch(`/api/admin/offers/api?${params}`, {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    hideLoading();
                    if (data.success) {
                        renderOffers(data.data);
                        renderPagination(data.pagination);
                    } else {
                        showAlert('加载失败: ' + data.message, 'danger');
                    }
                })
                .catch(error => {
                    hideLoading();
                    console.error('Error:', error);
                    showAlert('加载失败', 'danger');
                });
        }

        // 渲染标签
        function renderTags(items, type = 'primary', limit = 3) {
            if (!items || items.length === 0) {
                return '<span class="text-muted small">-</span>';
            }

            let html = '';
            const displayItems = items.slice(0, limit);
            const remaining = items.length - limit;

            displayItems.forEach(item => {
                html += `<span class="badge bg-${type} me-1 mb-1" style="font-size: 11px;">${escapeHtml(item)}</span>`;
            });

            if (remaining > 0) {
                html += `<span class="badge bg-secondary me-1 mb-1" style="font-size: 11px;">+${remaining}</span>`;
            }

            return html;
        }

        // 渲染礼遇表格
        function renderOffers(items) {
            const tbody = document.getElementById('offersTableBody');
            tbody.innerHTML = '';

            items.forEach(offer => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>
                        <div class="fw-bold">#${offer.id}</div>
                        <small class="text-muted font-monospace" style="font-size: 10px;">${offer.oid || '-'}</small>
                    </td>
                    <td>
                        <div class="d-flex flex-wrap gap-2">
                            ${renderCompactImage(offer.brand_logo_url, 'Logo', 'brand_logo')}
                            ${renderCompactImage(offer.detail_image_url, '详情', 'detail_image')}
                        </div>
                    </td>
                    <td>
                        <div class="fw-bold">
                            ${offer.is_vmorc ? '<span class="badge bg-primary me-1" title="VMORC礼遇"><i class="fas fa-v fa-xs"></i></span>' : ''}${offer.title || ''}
                        </div>
                        <small class="text-muted">${offer.subtitle || ''}</small>
                    </td>
                    <td>${renderTags(offer.topics, 'info', 2)}</td>
                    <td>${renderTags(offer.regions, 'success', 3)}</td>
                    <td>${renderTags(offer.tags, 'warning', 2)}</td>
                    <td style="white-space: normal;">${renderTags(offer.eligible_card_text, 'primary', 99)}</td>
                    <td style="white-space: normal;">${renderTags(offer.eligible_product_text, 'secondary', 99)}</td>
                    <td>
                        <span class="status-badge ${offer.status == 1 ? 'status-active' : 'status-inactive'}">
                            ${offer.status == 1 ? '启用' : '禁用'}
                        </span>
                    </td>
                    <td>
                        <div class="btn-group-vertical" role="group">
                            <button type="button" class="btn btn-sm btn-primary mb-1" onclick="editOffer(${offer.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" onclick="deleteOffer(${offer.id})">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // 渲染紧凑的图片显示（用于标题列）
        function renderCompactImage(imageUrl, label, type) {
            if (imageUrl) {
                return `
                    <div class="d-flex align-items-center gap-2">
                        <img src="${imageUrl}"
                             style="width: 70px; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid #dee2e6;"
                             onclick="viewImage('${imageUrl}', '${type}')"
                             alt="${type}"
                             title="点击查看大图">
                        <small class="text-muted" style="font-size: 12px;">${label}</small>
                    </div>
                `;
            } else {
                return `<small class="text-muted" style="font-size: 12px;">${label}: 无</small>`;
            }
        }

        // 渲染图片单元格
        function renderImageCell(imageUrl, type) {
            if (imageUrl) {
                // 详情图使用特殊比例，其他图片统一大小
                const cssClass = type === 'detail_image' ? 'image-preview detail-image' : 'image-preview';
                return `<img src="${imageUrl}" class="${cssClass}" onclick="viewImage('${imageUrl}', '${type}')" alt="${type}">`;
            } else {
                return '<span class="text-muted">无图片</span>';
            }
        }

        // 查看图片
        function viewImage(imageUrl, type) {
            document.getElementById('modalImage').src = imageUrl;
            document.getElementById('imageUrl').textContent = imageUrl;
            document.getElementById('downloadLink').href = imageUrl;
            document.getElementById('imageModalTitle').textContent = `图片预览 - ${type}`;

            const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
            imageModal.show();
        }

        // 显示图片模态框（通用函数，用于Hero Content等）
        function showImageModal(imageUrl, title = '图片预览') {
            viewImage(imageUrl, title);
        }

        // 编辑Offer
        function editOffer(offerId) {
            // Level反向映射字典（中文显示值 -> 数字值）
            const levelReverseDict = {
                '普卡': '0',
                '金卡': '1',
                '白金卡': '2',
                '御玺卡': '3',
                '无限卡': '4'
            };

            // 获取Offer详情并填充表单
            fetch(`/api/admin/offers/${offerId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('获取到的offer数据:', data);
                    if (!data.success) {
                        throw new Error(data.message || 'Failed to load offer');
                    }
                    const offer = data.data;
                    document.getElementById('editOfferId').value = offerId;
                    document.getElementById('editTitle').value = offer.title || '';
                    document.getElementById('editOid').value = offer.oid || '';
                    // 设置VMORC开关和ID
                    document.getElementById('editIsVmorc').checked = offer.isVmorc || false;
                    document.getElementById('editVmorcId').value = offer.vmorcId || '';
                    toggleVmorcIdField('edit');
                    window.originalEditTitle = offer.title || '';
                    window.originalEditOid = offer.oid || '';
                    document.getElementById('oidPreviewBadge').style.display = 'none';
                    document.getElementById('editSubtitle').value = offer.subtitle || '';
                    document.getElementById('editShortTitle').value = offer.shortTitle || '';
                    document.getElementById('editStatus').value = (offer.status !== undefined && offer.status !== null) ? offer.status : '1';
                    document.getElementById('editRating').value = offer.rating ?? 0;

                    // 处理level字段 - 如果是中文显示值，转换为数字值
                    let levelValue = offer.level !== null && offer.level !== undefined ? offer.level : 0;
                    if (levelReverseDict[levelValue]) {
                        levelValue = levelReverseDict[levelValue];
                    }
                    // 确保转换为字符串以匹配select的option值
                    document.getElementById('editLevel').value = String(levelValue);

                    // 处理offerType字段
                    document.getElementById('editOfferType').value = offer.offerType || '';

                    // 处理eligibilityConfig字段 - 使用可视化面板
                    if (offer.offerType === 'eligible_benefit') {
                        document.getElementById('editEligibilityPanel').style.display = 'block';
                        document.getElementById('editProvider').disabled = false;
                        loadEligibilityConfigToEditPanel(offer.eligibilityConfig);
                    } else {
                        document.getElementById('editEligibilityPanel').style.display = 'none';
                        document.getElementById('editProvider').disabled = true;
                        loadEligibilityConfigToEditPanel(null);
                    }

                    // 处理适用卡种字段（支持数组和字符串两种格式）
                    // 首先清空所有复选框
                    document.querySelectorAll('.edit-cardtype-checkbox').forEach(cb => cb.checked = false);

                    if (offer.eligibleCardText) {
                        let cardTypes = [];
                        if (Array.isArray(offer.eligibleCardText)) {
                            // 如果是数组格式
                            cardTypes = offer.eligibleCardText;
                        } else if (typeof offer.eligibleCardText === 'string' && offer.eligibleCardText.trim() !== '') {
                            // 如果是字符串，按逗号分割（支持中英文逗号）
                            cardTypes = offer.eligibleCardText.split(/[,，]/).map(item => item.trim()).filter(item => item !== '');
                        }

                        cardTypes.forEach(cardType => {
                            const checkbox = document.querySelector(`.edit-cardtype-checkbox[value="${cardType}"]`);
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        });
                    }

                    // 更新适用卡种显示文本
                    updateCardTypesDisplay('edit');

                    // 处理适用卡等级字段（支持数组和字符串两种格式）
                    // 首先清空所有复选框
                    document.querySelectorAll('.edit-productlevel-checkbox').forEach(cb => cb.checked = false);

                    if (offer.eligibleProductText) {
                        let productLevels = [];
                        if (Array.isArray(offer.eligibleProductText)) {
                            // 如果是数组格式
                            productLevels = offer.eligibleProductText;
                        } else if (typeof offer.eligibleProductText === 'string' && offer.eligibleProductText.trim() !== '') {
                            // 如果是字符串，按逗号分割（支持中英文逗号）
                            productLevels = offer.eligibleProductText.split(/[,，]/).map(item => item.trim()).filter(item => item !== '');
                        }

                        productLevels.forEach(level => {
                            // 去掉"Visa"前缀进行匹配（数据库中存储的是"Visa无限卡"，但checkbox值是"无限卡"）
                            const normalizedLevel = level.replace(/^Visa\s*/i, '');
                            const checkbox = document.querySelector(`.edit-productlevel-checkbox[value="${normalizedLevel}"]`);
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        });
                    }

                    // 更新适用卡等级显示文本
                    updateProductLevelsDisplay('edit');

                    // 处理场景选择（topics字段）
                    // topics 是数组格式，需要转换为英文值
                    let topics = [];
                    if (offer.topics && Array.isArray(offer.topics)) {
                        // 中文到英文的映射
                        const topicMap = {
                            '出境旅行': 'overseas',
                            '出国留学': 'students',
                            '本地生活': 'local',
                            '海淘': 'haitao',
                            '入境旅行': 'inbound'
                        };
                        topics = offer.topics.map(t => topicMap[t] || t);
                    } else if (offer.topics_en && Array.isArray(offer.topics_en)) {
                        // 如果有英文版本，直接使用
                        topics = offer.topics_en;
                    }

                    // 设置复选框的选中状态
                    document.getElementById('editTopicOverseas').checked = topics.includes('overseas');
                    document.getElementById('editTopicStudents').checked = topics.includes('students');
                    document.getElementById('editTopicLocal').checked = topics.includes('local');
                    document.getElementById('editTopicHaitao').checked = topics.includes('haitao');
                    document.getElementById('editTopicInbound').checked = topics.includes('inbound');

                    // 更新下拉框显示文本
                    updateTopicsDisplay('edit');

                    // 处理国家/地区选择（regions字段）
                    // 首先清空所有复选框
                    document.querySelectorAll('.edit-region-checkbox').forEach(cb => cb.checked = false);

                    // regions 是数组格式
                    if (offer.regions && Array.isArray(offer.regions)) {
                        offer.regions.forEach(region => {
                            // 尝试匹配每个region到对应的复选框
                            const checkbox = document.querySelector(`.edit-region-checkbox[value="${region}"]`);
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        });

                        // 所有regions加载完成后，检查每个分组是否有被选中的子项
                        const groups = ['cn', 'hmt', 'jk', 'sea', 'eu', 'na', 'anz'];
                        groups.forEach(groupId => {
                            const childCheckboxes = document.querySelectorAll(`.edit-region-checkbox[data-parent="${groupId}"]`);
                            if (childCheckboxes.length > 0) {
                                const anyChecked = Array.from(childCheckboxes).some(cb => cb.checked);
                                const groupCheckbox = document.querySelector(`.edit-region-checkbox[data-group="${groupId}"]`);
                                if (groupCheckbox) {
                                    groupCheckbox.checked = anyChecked;
                                }
                            }
                        });
                    }

                    // 更新国家/地区显示文本
                    updateRegionsDisplay('edit');

                    // 处理分类选择（tags字段）
                    // 首先清空所有复选框
                    document.querySelectorAll('.edit-tag-checkbox').forEach(cb => cb.checked = false);

                    // tags 是数组格式
                    if (offer.tags && Array.isArray(offer.tags)) {
                        offer.tags.forEach(tag => {
                            // 尝试匹配每个tag到对应的复选框
                            const checkbox = document.querySelector(`.edit-tag-checkbox[value="${tag}"]`);
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        });
                    }

                    // 更新分类显示文本
                    updateTagsDisplay('edit');

                    document.getElementById('editStartDate').value = offer.startDate || '';
                    document.getElementById('editEndDate').value = offer.endDate || '';
                    document.getElementById('editStartDateText').value = offer.startDateText || '';
                    document.getElementById('editEndDateText').value = offer.endDateText || '';
                    document.getElementById('editActionText').value = offer.actionText || '';
                    document.getElementById('editLinkH5').value = offer.linkH5 || '';
                    document.getElementById('editLinkMiniapp').value = offer.linkMiniapp || '';
                    document.getElementById('editEnableWebview').checked = offer.enableWebview || false;
                    // 清除活动搜索状态
                    document.getElementById('editCampaignSearch').value = '';
                    document.getElementById('editCampaignSearchResults').innerHTML = '';
                    document.getElementById('editSelectedCampaignInfo').style.display = 'none';
                    // 设置富文本编辑器内容
                    if (summernoteEditors.editRewardDetailEditor) {
                        summernoteEditors.editRewardDetailEditor.summernote('code', offer.rewardDetail || '');
                    }
                    if (summernoteEditors.editMerchantDescriptionEditor) {
                        summernoteEditors.editMerchantDescriptionEditor.summernote('code', offer.merchantDescription || '');
                    }
                    if (summernoteEditors.editHowToRedeemEditor) {
                        summernoteEditors.editHowToRedeemEditor.summernote('code', offer.howToRedeem || '');
                    }
                    if (summernoteEditors.editTermsAndConditionsEditor) {
                        summernoteEditors.editTermsAndConditionsEditor.summernote('code', offer.termsAndConditions || '');
                    }

                    // 设置图片预览
                    setImagePreview('editThumbnailUrl', 'editThumbnailPreview', offer.thumbnailUrl);
                    setImagePreview('editBannerUrl', 'editBannerPreview', offer.bannerUrl);
                    setImagePreview('editBannerCoverUrl', 'editBannerCoverPreview', offer.bannerCoverUrl);
                    setImagePreview('editBrandLogoUrl', 'editBrandLogoPreview', offer.brandLogoUrl);
                    setImagePreview('editDetailImageUrl', 'editDetailImagePreview', offer.detailImageUrl);

                    // 初始化白名单
                    initializeWhitelist('editOffer', offer.whitelist || {});

                    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.show();
                })
                .catch(error => {
                    console.error('Error loading offer:', error);
                    showAlert('获取Offer详情失败: ' + error.message, 'danger');
                });
        }

        // 创建新Offer
        function createOffer() {
            // 收集场景选择（从复选框获取英文值）
            const createTopicsEn = [];
            if (document.getElementById('createTopicOverseas').checked) createTopicsEn.push('overseas');
            if (document.getElementById('createTopicStudents').checked) createTopicsEn.push('students');
            if (document.getElementById('createTopicLocal').checked) createTopicsEn.push('local');
            if (document.getElementById('createTopicHaitao').checked) createTopicsEn.push('haitao');
            if (document.getElementById('createTopicInbound').checked) createTopicsEn.push('inbound');

            // 英文到中文的映射
            const topicMap = {
                'overseas': '出境旅行',
                'students': '出国留学',
                'local': '本地生活',
                'haitao': '海淘',
                'inbound': '入境旅行'
            };
            const createTopics = createTopicsEn.map(en => topicMap[en]);

            // 收集国家/地区选择
            const createRegions = [];
            document.querySelectorAll('.create-region-checkbox:checked').forEach(checkbox => {
                createRegions.push(checkbox.value);
            });

            // 收集分类选择
            const createTags = [];
            document.querySelectorAll('.create-tag-checkbox:checked').forEach(checkbox => {
                createTags.push(checkbox.value);
            });

            // 收集适用卡种选择
            const createCardTypes = [];
            document.querySelectorAll('.create-cardtype-checkbox:checked').forEach(checkbox => {
                createCardTypes.push(checkbox.value);
            });

            // 收集适用卡等级选择
            const createProductLevels = [];
            document.querySelectorAll('.create-productlevel-checkbox:checked').forEach(checkbox => {
                // 为等级加上"Visa"前缀（除了"所有等级"、"商务卡"、"公司卡"、"采购卡"）
                const level = checkbox.value;
                if (level === '所有等级' || level === '商务卡' || level === '公司卡' || level === '采购卡') {
                    createProductLevels.push(level);
                } else {
                    createProductLevels.push('Visa' + level);
                }
            });

            // 处理eligibilityConfig - 从可视化面板生成
            const createEligibilityConfig = generateEligibilityConfig('create');

            const formData = {
                title: document.getElementById('createTitle').value,
                subtitle: document.getElementById('createSubtitle').value,
                short_title: document.getElementById('createShortTitle').value,
                status: document.getElementById('createStatus').value,
                is_vmorc: document.getElementById('createIsVmorc').checked ? 1 : 0,
                vmorc_id: document.getElementById('createVmorcId').value,
                rating: document.getElementById('createRating').value,
                level: document.getElementById('createLevel').value,
                offer_type: document.getElementById('createOfferType').value || null,
                eligibility_config: createEligibilityConfig,
                eligible_card_text: createCardTypes,  // 发送数组，后端会自动转换为JSON
                eligible_product_text: createProductLevels,  // 发送数组，后端会自动转换为JSON
                topics: createTopics,
                regions: createRegions,
                tags: createTags,
                start_date: document.getElementById('createStartDate').value,
                end_date: document.getElementById('createEndDate').value,
                start_date_text: document.getElementById('createStartDateText').value,
                end_date_text: document.getElementById('createEndDateText').value,
                action_text: document.getElementById('createActionText').value,
                link_h5: document.getElementById('createLinkH5').value,
                link_miniapp: document.getElementById('createLinkMiniapp').value,
                enable_webview: document.getElementById('createEnableWebview').checked,
                reward_detail: summernoteEditors.createRewardDetailEditor ? summernoteEditors.createRewardDetailEditor.summernote('code') : '',
                merchant_description: summernoteEditors.createMerchantDescriptionEditor ? summernoteEditors.createMerchantDescriptionEditor.summernote('code') : '',
                how_to_redeem: summernoteEditors.createHowToRedeemEditor ? summernoteEditors.createHowToRedeemEditor.summernote('code') : '',
                terms_and_conditions: summernoteEditors.createTermsAndConditionsEditor ? summernoteEditors.createTermsAndConditionsEditor.summernote('code') : '',
                thumbnail_url: document.getElementById('createThumbnailUrl').value,
                banner_url: document.getElementById('createBannerUrl').value,
                banner_cover_url: document.getElementById('createBannerCoverUrl').value,
                brand_logo_url: document.getElementById('createBrandLogoUrl').value,
                detail_image_url: document.getElementById('createDetailImageUrl').value,
                whitelist: getWhitelistConfig('createOffer')
            };

            fetch('/api/admin/offers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Offer创建成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('createModal')).hide();
                        // 清空表单
                        document.getElementById('createForm').reset();
                        // 清空图片预览和删除按钮
                        ['createThumbnailPreview', 'createBannerPreview', 'createBannerCoverPreview', 'createBrandLogoPreview', 'createDetailImagePreview'].forEach(id => {
                            document.getElementById(id).style.display = 'none';
                        });
                        ['createThumbnailDeleteBtn', 'createBannerDeleteBtn', 'createBannerCoverDeleteBtn', 'createBrandLogoDeleteBtn', 'createDetailImageDeleteBtn'].forEach(id => {
                            document.getElementById(id).style.display = 'none';
                        });
                        // 重置场景选择下拉框显示文本
                        updateTopicsDisplay('create');
                        // 重置国家/地区选择下拉框显示文本
                        updateRegionsDisplay('create');
                        loadOffers();
                        loadOfferCounts();
                    } else {
                        let errorMsg = '创建失败: ' + data.message;
                        if (data.errors) {
                            const errorDetails = [];
                            for (const [field, messages] of Object.entries(data.errors)) {
                                errorDetails.push(`${field}: ${messages.join(', ')}`);
                            }
                            errorMsg += '\n' + errorDetails.join('\n');
                        }
                        showAlert(errorMsg, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('创建失败', 'danger');
                });
        }

        // 设置图片预览
        function setImagePreview(urlInputId, previewId, imageUrl) {
            const urlInput = document.getElementById(urlInputId);
            const preview = document.getElementById(previewId);
            const deleteBtn = document.getElementById(urlInputId.replace('Url', 'DeleteBtn'));

            if (imageUrl) {
                urlInput.value = imageUrl;
                preview.src = imageUrl;
                preview.style.display = 'block';
                if (deleteBtn) {
                    deleteBtn.style.display = 'block';
                }
                preview.onclick = () => viewImage(imageUrl, urlInputId.replace('edit', '').replace('create', '').replace('Url', ''));
            } else {
                urlInput.value = '';
                preview.style.display = 'none';
                if (deleteBtn) {
                    deleteBtn.style.display = 'none';
                }
            }
        }

        // 删除图片
        function removeImage(urlInputId, previewId, deleteBtnId) {
            if (confirm('确定要删除这张图片吗？')) {
                const urlInput = document.getElementById(urlInputId);
                const preview = document.getElementById(previewId);
                const deleteBtn = document.getElementById(deleteBtnId);
                const fileInput = document.getElementById(urlInputId.replace('Url', 'File'));

                // 清空所有相关的输入
                urlInput.value = '';
                preview.style.display = 'none';
                deleteBtn.style.display = 'none';
                if (fileInput) {
                    fileInput.value = '';
                }

                showAlert('图片已删除', 'success');
            }
        }

        // 上传图片
        function uploadImage(type, urlInputId, previewId) {
            const fileInputId = urlInputId.replace('Url', 'File');
            const fileInput = document.getElementById(fileInputId);
            const urlInput = document.getElementById(urlInputId);

            if (fileInput.files.length > 0) {
                // 上传文件
                const formData = new FormData();
                formData.append('image', fileInput.files[0]);
                formData.append('type', type);

                fetch('/api/admin/offers/upload-image', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            urlInput.value = data.url;
                            setImagePreview(urlInputId, previewId, data.url);
                            // 清空文件输入框
                            fileInput.value = '';
                            showAlert('图片上传成功', 'success');
                        } else {
                            showAlert('图片上传失败: ' + data.message, 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert('图片上传失败', 'danger');
                    });
            } else if (urlInput.value) {
                // 从URL上传
                fetch('/api/admin/offers/upload-image-from-url', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        url: urlInput.value,
                        type: type
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            urlInput.value = data.url;
                            setImagePreview(urlInputId, previewId, data.url);
                            // 清空文件输入框
                            fileInput.value = '';
                            showAlert('图片上传成功', 'success');
                        } else {
                            showAlert('图片上传失败: ' + data.message, 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert('图片上传失败', 'danger');
                    });
            } else {
                showAlert('请选择文件或输入图片URL', 'warning');
            }
        }

        // 保存Offer
        function saveOffer() {
            const offerId = document.getElementById('editOfferId').value;

            // 收集场景选择（从复选框获取英文值）
            const topicsEn = [];
            if (document.getElementById('editTopicOverseas').checked) topicsEn.push('overseas');
            if (document.getElementById('editTopicStudents').checked) topicsEn.push('students');
            if (document.getElementById('editTopicLocal').checked) topicsEn.push('local');
            if (document.getElementById('editTopicHaitao').checked) topicsEn.push('haitao');
            if (document.getElementById('editTopicInbound').checked) topicsEn.push('inbound');

            // 英文到中文的映射
            const topicMap = {
                'overseas': '出境旅行',
                'students': '出国留学',
                'local': '本地生活',
                'haitao': '海淘',
                'inbound': '入境旅行'
            };
            const topics = topicsEn.map(en => topicMap[en]);

            // 收集国家/地区选择
            const regions = [];
            document.querySelectorAll('.edit-region-checkbox:checked').forEach(checkbox => {
                regions.push(checkbox.value);
            });

            // 收集分类选择
            const tags = [];
            document.querySelectorAll('.edit-tag-checkbox:checked').forEach(checkbox => {
                tags.push(checkbox.value);
            });

            // 收集适用卡种选择
            const cardTypes = [];
            document.querySelectorAll('.edit-cardtype-checkbox:checked').forEach(checkbox => {
                cardTypes.push(checkbox.value);
            });

            // 收集适用卡等级选择
            const productLevels = [];
            document.querySelectorAll('.edit-productlevel-checkbox:checked').forEach(checkbox => {
                // 为等级加上"Visa"前缀（除了"所有等级"、"商务卡"、"公司卡"、"采购卡"）
                const level = checkbox.value;
                if (level === '所有等级' || level === '商务卡' || level === '公司卡' || level === '采购卡') {
                    productLevels.push(level);
                } else {
                    productLevels.push('Visa' + level);
                }
            });

            // 处理eligibilityConfig - 从可视化面板生成
            const editEligibilityConfig = generateEligibilityConfig('edit');

            const formData = {
                title: document.getElementById('editTitle').value,
                subtitle: document.getElementById('editSubtitle').value,
                short_title: document.getElementById('editShortTitle').value,
                status: document.getElementById('editStatus').value,
                is_vmorc: document.getElementById('editIsVmorc').checked ? 1 : 0,
                vmorc_id: document.getElementById('editVmorcId').value,
                rating: document.getElementById('editRating').value,
                level: document.getElementById('editLevel').value,
                offer_type: document.getElementById('editOfferType').value || null,
                eligibility_config: editEligibilityConfig,
                eligible_card_text: cardTypes,  // 发送数组，后端会自动转换为JSON
                eligible_product_text: productLevels,  // 发送数组，后端会自动转换为JSON
                topics: topics,  // 发送数组，后端会自动转换为JSON
                regions: regions,  // 发送数组，后端会自动转换为JSON
                tags: tags,  // 发送数组，后端会自动转换为JSON
                start_date: document.getElementById('editStartDate').value,
                end_date: document.getElementById('editEndDate').value,
                start_date_text: document.getElementById('editStartDateText').value,
                end_date_text: document.getElementById('editEndDateText').value,
                action_text: document.getElementById('editActionText').value,
                link_h5: document.getElementById('editLinkH5').value,
                link_miniapp: document.getElementById('editLinkMiniapp').value,
                enable_webview: document.getElementById('editEnableWebview').checked,
                reward_detail: summernoteEditors.editRewardDetailEditor ? summernoteEditors.editRewardDetailEditor.summernote('code') : '',
                merchant_description: summernoteEditors.editMerchantDescriptionEditor ? summernoteEditors.editMerchantDescriptionEditor.summernote('code') : '',
                how_to_redeem: summernoteEditors.editHowToRedeemEditor ? summernoteEditors.editHowToRedeemEditor.summernote('code') : '',
                terms_and_conditions: summernoteEditors.editTermsAndConditionsEditor ? summernoteEditors.editTermsAndConditionsEditor.summernote('code') : '',
                thumbnail_url: document.getElementById('editThumbnailUrl').value,
                banner_url: document.getElementById('editBannerUrl').value,
                banner_cover_url: document.getElementById('editBannerCoverUrl').value,
                brand_logo_url: document.getElementById('editBrandLogoUrl').value,
                detail_image_url: document.getElementById('editDetailImageUrl').value,
                whitelist: getWhitelistConfig('editOffer')
            };

            fetch(`/api/admin/offers/${offerId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Offer更新成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
                        loadOffers();
                        loadOfferCounts();
                    } else {
                        let errorMsg = '更新失败: ' + data.message;
                        if (data.errors) {
                            const errorDetails = [];
                            for (const [field, messages] of Object.entries(data.errors)) {
                                errorDetails.push(`${field}: ${messages.join(', ')}`);
                            }
                            errorMsg += '\n' + errorDetails.join('\n');
                        }
                        showAlert(errorMsg, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('更新失败', 'danger');
                });
        }

        // 删除Offer
        function deleteOffer(offerId) {
            if (!confirm('确定要删除这个礼遇吗？此操作不可恢复。')) {
                return;
            }

            fetch(`/api/admin/offers/${offerId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('礼遇删除成功', 'success');
                        loadOffers();
                        loadOfferCounts();
                    } else {
                        showAlert('删除失败: ' + data.message, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('删除失败', 'danger');
                });
        }

        // 渲染分页
        function renderPagination(pagination) {
            const paginationEl = document.getElementById('pagination');
            const paginationInfo = document.getElementById('paginationInfo');
            const paginationSummary = document.getElementById('paginationSummary');
            paginationEl.innerHTML = '';

            // 计算当前显示的记录范围
            const startRecord = (pagination.current_page - 1) * pagination.per_page + 1;
            const endRecord = Math.min(pagination.current_page * pagination.per_page, pagination.total);

            // 显示记录范围信息
            paginationInfo.innerHTML = `显示 ${startRecord}-${endRecord} 条`;

            // 显示总页数和总记录数
            paginationSummary.innerHTML = `共 ${pagination.total} 条记录，${pagination.last_page} 页`;

            if (pagination.last_page <= 1) return;

            // 上一页
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${pagination.current_page === 1 ? 'disabled' : ''}`;
            prevLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${pagination.current_page - 1})">上一页</a>`;
            paginationEl.appendChild(prevLi);

            // 页码
            const startPage = Math.max(1, pagination.current_page - 2);
            const endPage = Math.min(pagination.last_page, pagination.current_page + 2);

            for (let i = startPage; i <= endPage; i++) {
                const li = document.createElement('li');
                li.className = `page-item ${i === pagination.current_page ? 'active' : ''}`;
                li.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
                paginationEl.appendChild(li);
            }

            // 下一页
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${pagination.current_page === pagination.last_page ? 'disabled' : ''}`;
            nextLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${pagination.current_page + 1})">下一页</a>`;
            paginationEl.appendChild(nextLi);
        }

        // 跳转页面
        function goToPage(page) {
            currentPage = page;
            loadOffers();
        }

        // 显示加载指示器
        function showLoading() {
            document.getElementById('loadingIndicator').style.display = 'block';
            document.querySelector('.table-responsive').classList.add('loading');
        }

        // 隐藏加载指示器
        function hideLoading() {
            document.getElementById('loadingIndicator').style.display = 'none';
            document.querySelector('.table-responsive').classList.remove('loading');
        }

        // 切换VMORC ID字段显示
        function toggleVmorcIdField(prefix) {
            const isVmorcChecked = document.getElementById(`${prefix}IsVmorc`).checked;
            const vmorcIdWrapper = document.getElementById(`${prefix}VmorcIdWrapper`);
            if (isVmorcChecked) {
                vmorcIdWrapper.style.display = 'block';
            } else {
                vmorcIdWrapper.style.display = 'none';
                document.getElementById(`${prefix}VmorcId`).value = '';
            }
        }

        // 显示提示信息
        function showAlert(message, type = 'info') {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(alertDiv);

            // 自动消失
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }

        // ==================== 活动搜索相关函数（用于生成链接） ====================
        // 搜索活动用于生成链接
        async function searchCampaignsForOffer(mode) {
            const searchInput = document.getElementById(`${mode}CampaignSearch`);
            const resultsContainer = document.getElementById(`${mode}CampaignSearchResults`);
            const keyword = searchInput.value.trim();

            if (!keyword) {
                showAlert('请输入搜索关键词', 'warning');
                return;
            }

            resultsContainer.innerHTML = '<div class="text-center text-muted py-2"><i class="fas fa-spinner fa-spin"></i> 搜索中...</div>';

            try {
                const url = `/api/admin/campaigns/search?keyword=${encodeURIComponent(keyword)}&is_test=0&per_page=10`;
                const response = await fetch(url);
                const result = await response.json();

                if (result.success && result.data.length > 0) {
                    resultsContainer.innerHTML = result.data.map(campaign => {
                        const name = (campaign.name || '').replace(/'/g, "\\'");
                        const acampaignId = (campaign.acampaign_id || '').replace(/'/g, "\\'");
                        const id = campaign.id;

                        return `
                            <div class="border rounded p-2 mb-2" style="cursor: pointer;" onclick="selectCampaignForOffer('${mode}', ${id}, '${acampaignId}', '${name}')">
                                <div class="d-flex align-items-center">
                                    ${campaign.banner_image_url ? `<img src="${campaign.banner_image_url}" class="me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" onerror="this.style.display='none'">` : ''}
                                    <div class="flex-grow-1 overflow-hidden">
                                        <div class="fw-bold text-truncate">${escapeHtmlForOffer(campaign.name || '未命名')}</div>
                                        <small class="text-muted text-truncate d-block">${escapeHtmlForOffer(campaign.description || '')}</small>
                                    </div>
                                    <span class="badge bg-success ms-2">${acampaignId || '#' + id}</span>
                                </div>
                            </div>
                        `;
                    }).join('');
                } else {
                    resultsContainer.innerHTML = '<div class="text-center text-muted py-2">未找到匹配的活动</div>';
                }
            } catch (error) {
                console.error('Search campaigns error:', error);
                resultsContainer.innerHTML = '<div class="text-center text-danger py-2">搜索失败，请重试</div>';
            }
        }

        // 选择活动并自动填充链接
        function selectCampaignForOffer(mode, id, acampaignId, name) {
            // 使用 acampaign_id 生成链接
            const campaignIdForLink = acampaignId || id;
            document.getElementById(`${mode}LinkH5`).value = `/campaign/${campaignIdForLink}`;
            document.getElementById(`${mode}LinkMiniapp`).value = `/campaign/detail/index?campaignId=${campaignIdForLink}`;

            // 显示选中信息
            document.getElementById(`${mode}SelectedCampaignInfo`).style.display = 'block';
            document.getElementById(`${mode}SelectedCampaignName`).textContent = name || `活动 #${id}`;
            document.getElementById(`${mode}CampaignSearchResults`).innerHTML = '';
            document.getElementById(`${mode}CampaignSearch`).value = '';

            showAlert('已选择活动并自动生成链接', 'success');
        }

        // 清除选中的活动
        function clearSelectedCampaignForOffer(mode) {
            document.getElementById(`${mode}SelectedCampaignInfo`).style.display = 'none';
            document.getElementById(`${mode}SelectedCampaignName`).textContent = '';
            // 不清除链接输入框的值，允许用户手动修改
        }

        // HTML转义函数（用于活动搜索）
        function escapeHtmlForOffer(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 监听活动搜索输入框回车
        document.addEventListener('DOMContentLoaded', function() {
            ['create', 'edit'].forEach(mode => {
                const searchInput = document.getElementById(`${mode}CampaignSearch`);
                if (searchInput) {
                    searchInput.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            searchCampaignsForOffer(mode);
                        }
                    });
                }
            });
        });

        // ==================== 资格配置相关函数 ====================
        // 可用的卡片等级
        const CARD_LEVELS = [
            'Visa Infinite',
            'Visa Signature',
            'Visa Signature Business',
            'Visa Platinum',
            'Visa Gold',
            'Visa Business',
            'Visa Business Enhanced',
            'Visa Classic'
        ];

        // 卡片等级优先级
        const CARD_LEVEL_PRIORITY = {
            'Visa Classic': 0,
            'Visa Business Enhanced': 1,
            'Visa Business': 1,
            'Visa Gold': 2,
            'Visa Platinum': 3,
            'Visa Signature': 4,
            'Visa Signature Business': 4,
            'Visa Infinite': 5
        };

        let createLevelCounter = 0;
        let editLevelCounter = 0;

        // 切换创建模态框的资格配置面板
        function toggleCreateEligibilityPanel() {
            const offerType = document.getElementById('createOfferType').value;
            const panel = document.getElementById('createEligibilityPanel');
            const providerSelect = document.getElementById('createProvider');

            if (offerType === 'eligible_benefit') {
                panel.style.display = 'block';
                providerSelect.disabled = false;
            } else {
                panel.style.display = 'none';
                providerSelect.disabled = true;
                providerSelect.value = '';
            }
        }

        // 切换编辑模态框的资格配置面板
        function toggleEditEligibilityPanel() {
            const offerType = document.getElementById('editOfferType').value;
            const panel = document.getElementById('editEligibilityPanel');
            const providerSelect = document.getElementById('editProvider');

            if (offerType === 'eligible_benefit') {
                panel.style.display = 'block';
                providerSelect.disabled = false;
            } else {
                panel.style.display = 'none';
                providerSelect.disabled = true;
                providerSelect.value = '';
            }
        }

        // 生成等级配置卡片HTML
        function generateLevelCardHtml(prefix, index, levelData = null) {
            const id = levelData?.id || '';
            const name = levelData?.name || '';
            const nameEn = levelData?.name_en || '';
            const icon = levelData?.icon || '';
            const selectedCardLevels = levelData?.card_levels || [];
            const benefits = levelData?.benefits || [];
            const priority = levelData?.priority || (index + 1);

            const cardLevelsCheckboxes = CARD_LEVELS.map((level, i) => {
                const checked = selectedCardLevels.includes(level) ? 'checked' : '';
                return `
                    <div class="form-check form-check-inline">
                        <input class="form-check-input ${prefix}-level-${index}-cardlevel" type="checkbox" value="${level}" id="${prefix}Level${index}Card${i}" ${checked}>
                        <label class="form-check-label" for="${prefix}Level${index}Card${i}">${level}</label>
                    </div>
                `;
            }).join('');

            const benefitsList = benefits.length > 0 ? benefits.join('\n') : '';

            // 图标预览HTML
            const iconPreviewStyle = icon ? '' : 'd-none';
            const iconPreviewSrc = icon || '';

            return `
                <div class="card mb-2" id="${prefix}LevelCard${index}" data-level-index="${index}">
                    <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
                        <span class="fw-bold">等级 ${index + 1}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeLevel('${prefix}', ${index})">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="card-body py-2">
                        <div class="row mb-2">
                            <div class="col-md-2">
                                <label class="form-label small">等级ID</label>
                                <input type="text" class="form-control form-control-sm" id="${prefix}LevelId${index}" value="${id}" placeholder="如: gold">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label small">等级名称(中文)</label>
                                <input type="text" class="form-control form-control-sm" id="${prefix}LevelName${index}" value="${name}" placeholder="如: 金卡会员">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label small">等级名称(英文)</label>
                                <input type="text" class="form-control form-control-sm" id="${prefix}LevelNameEn${index}" value="${nameEn}" placeholder="如: Gold Member">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">等级图标</label>
                                <div class="d-flex align-items-center">
                                    <input type="hidden" id="${prefix}LevelIcon${index}" value="${icon}">
                                    <input type="file" class="form-control form-control-sm" id="${prefix}LevelIconFile${index}" accept="image/*" onchange="uploadLevelIcon('${prefix}', ${index})" style="max-width: 200px;">
                                    <img src="${iconPreviewSrc}" class="img-thumbnail ms-2 ${iconPreviewStyle}" style="height: 38px; width: 38px; object-fit: contain;" id="${prefix}LevelIconPreview${index}">
                                    <span class="ms-2 text-muted small" id="${prefix}LevelIconStatus${index}"></span>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label small">优先级</label>
                                <input type="number" class="form-control form-control-sm" id="${prefix}LevelPriority${index}" value="${priority}" min="1">
                                <small class="text-muted">数字越大等级越高</small>
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label small">适用卡片等级 <span class="text-muted">(勾选可享受此等级权益的卡片)</span></label>
                            <div class="border rounded p-2 bg-light">
                                ${cardLevelsCheckboxes}
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label small">权益列表 <span class="text-muted">(每行一条权益)</span></label>
                            <textarea class="form-control form-control-sm" id="${prefix}LevelBenefits${index}" rows="2" placeholder="全球800+酒店会员价&#10;延迟退房">${benefitsList}</textarea>
                        </div>
                    </div>
                </div>
            `;
        }

        // 上传等级图标到OSS
        async function uploadLevelIcon(prefix, index) {
            const fileInput = document.getElementById(`${prefix}LevelIconFile${index}`);
            const hiddenInput = document.getElementById(`${prefix}LevelIcon${index}`);
            const preview = document.getElementById(`${prefix}LevelIconPreview${index}`);
            const status = document.getElementById(`${prefix}LevelIconStatus${index}`);

            if (!fileInput.files || fileInput.files.length === 0) {
                return;
            }

            const file = fileInput.files[0];

            // 验证文件类型
            if (!file.type.startsWith('image/')) {
                showAlert('请选择图片文件', 'danger');
                fileInput.value = '';
                return;
            }

            // 验证文件大小 (5MB)
            if (file.size > 5 * 1024 * 1024) {
                showAlert('图片大小不能超过5MB', 'danger');
                fileInput.value = '';
                return;
            }

            // 显示上传状态
            status.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 上传中...';
            fileInput.disabled = true;

            try {
                const formData = new FormData();
                formData.append('image', file);
                formData.append('type', 'level_icon');

                const response = await fetch('/api/admin/offers/upload-image', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    }
                });

                const result = await response.json();

                if (result.success) {
                    // 设置隐藏输入框的值
                    hiddenInput.value = result.url;

                    // 显示预览
                    preview.src = result.url;
                    preview.classList.remove('d-none');

                    // 显示成功状态
                    status.innerHTML = '<i class="fas fa-check text-success"></i>';
                    setTimeout(() => { status.innerHTML = ''; }, 2000);
                } else {
                    throw new Error(result.message || '上传失败');
                }
            } catch (error) {
                console.error('Upload error:', error);
                showAlert('图标上传失败: ' + error.message, 'danger');
                status.innerHTML = '<i class="fas fa-times text-danger"></i> 失败';
            } finally {
                fileInput.disabled = false;
            }
        }

        // 添加创建等级
        function addCreateLevel(levelData = null) {
            const container = document.getElementById('createLevelsContainer');
            const html = generateLevelCardHtml('create', createLevelCounter, levelData);
            container.insertAdjacentHTML('beforeend', html);
            createLevelCounter++;
        }

        // 添加编辑等级
        function addEditLevel(levelData = null) {
            const container = document.getElementById('editLevelsContainer');
            const html = generateLevelCardHtml('edit', editLevelCounter, levelData);
            container.insertAdjacentHTML('beforeend', html);
            editLevelCounter++;
        }

        // 删除等级
        function removeLevel(prefix, index) {
            const card = document.getElementById(`${prefix}LevelCard${index}`);
            if (card) {
                card.remove();
            }
        }

        // 收集等级配置数据
        function collectLevelsData(prefix) {
            const container = document.getElementById(`${prefix}LevelsContainer`);
            const cards = container.querySelectorAll('[data-level-index]');
            const levels = [];

            cards.forEach(card => {
                const index = card.dataset.levelIndex;
                const id = document.getElementById(`${prefix}LevelId${index}`)?.value?.trim();
                const name = document.getElementById(`${prefix}LevelName${index}`)?.value?.trim();
                const nameEn = document.getElementById(`${prefix}LevelNameEn${index}`)?.value?.trim();
                const icon = document.getElementById(`${prefix}LevelIcon${index}`)?.value?.trim();
                const priority = parseInt(document.getElementById(`${prefix}LevelPriority${index}`)?.value) || 1;
                const benefitsText = document.getElementById(`${prefix}LevelBenefits${index}`)?.value?.trim();
                const benefits = benefitsText ? benefitsText.split('\n').map(b => b.trim()).filter(b => b) : [];

                // 收集选中的卡片等级
                const cardLevels = [];
                const checkboxes = document.querySelectorAll(`.${prefix}-level-${index}-cardlevel:checked`);
                checkboxes.forEach(cb => cardLevels.push(cb.value));

                if (id && name) {
                    const levelData = {
                        id,
                        name,
                        name_en: nameEn,
                        card_levels: cardLevels,
                        benefits,
                        priority
                    };
                    // 只有在有图标时才添加icon字段
                    if (icon) {
                        levelData.icon = icon;
                    }
                    levels.push(levelData);
                }
            });

            return levels;
        }

        // 生成完整的eligibility_config JSON
        function generateEligibilityConfig(prefix) {
            const offerType = document.getElementById(`${prefix}OfferType`).value;

            if (offerType !== 'eligible_benefit') {
                return null;
            }

            const provider = document.getElementById(`${prefix}Provider`).value;
            const ineligibleMessage = document.getElementById(`${prefix}IneligibleMessage`).value.trim();
            const levels = collectLevelsData(prefix);

            if (levels.length === 0) {
                return null;
            }

            return {
                eligibility_type: 'card_level',
                benefit_type: 'external_membership',
                provider: provider || 'null',
                levels: levels,
                card_level_priority: CARD_LEVEL_PRIORITY,
                ineligible_message: ineligibleMessage
            };
        }

        // 加载现有的eligibility_config到编辑面板
        function loadEligibilityConfigToEditPanel(config) {
            // 清空现有等级卡片
            document.getElementById('editLevelsContainer').innerHTML = '';
            editLevelCounter = 0;

            if (!config) {
                document.getElementById('editProvider').value = '';
                document.getElementById('editIneligibleMessage').value = '';
                return;
            }

            // 设置服务商
            document.getElementById('editProvider').value = config.provider || '';

            // 设置不符合条件提示
            document.getElementById('editIneligibleMessage').value = config.ineligible_message || '';

            // 添加等级卡片
            if (config.levels && Array.isArray(config.levels)) {
                config.levels.forEach(level => {
                    addEditLevel(level);
                });
            }
        }

        // 重置创建面板
        function resetCreateEligibilityPanel() {
            document.getElementById('createLevelsContainer').innerHTML = '';
            createLevelCounter = 0;
            document.getElementById('createProvider').value = '';
            document.getElementById('createIneligibleMessage').value = '';
            document.getElementById('createEligibilityPanel').style.display = 'none';
            document.getElementById('createProvider').disabled = true;
        }

        // ==================== Hero Content相关函数 ====================
        let heroContents = [];
        let availableOffers = [];
        // 白名单数据 - 统一使用whitelists变量
        if (!window.whitelists) {
            window.whitelists = {};
        }



        // 加载Hero Contents列表
        function loadHeroContents() {
            fetch('/api/admin/offers/hero-contents')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        heroContents = data.data;
                        renderHeroContentsTable();
                    } else {
                        showAlert('加载Hero Contents失败', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('加载Hero Contents失败', 'danger');
                });
        }

        // 加载可用的Offers
        function loadOffersForHero() {
            fetch('/api/admin/offers/offers-for-hero')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        availableOffers = data.data;
                        populateOfferSelects();
                    } else {
                        showAlert('加载Offers失败', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('加载Offers失败', 'danger');
                });
        }

        // 填充Offer选择框
        function populateOfferSelects() {
            const createSelect = document.getElementById('createHeroOfferId');
            const editSelect = document.getElementById('editHeroOfferId');

            // 清空现有选项
            createSelect.innerHTML = '<option value="">请选择...</option>';
            editSelect.innerHTML = '<option value="">请选择...</option>';

            // 添加Offer选项
            availableOffers.forEach(offer => {
                const createOption = new Option(`${offer.id} - ${offer.title}`, offer.id);
                const editOption = new Option(`${offer.id} - ${offer.title}`, offer.id);
                createSelect.appendChild(createOption);
                editSelect.appendChild(editOption);
            });
        }

        // 渲染Hero Contents表格
        function renderHeroContentsTable() {
            const tbody = document.getElementById('heroContentsTableBody');
            tbody.innerHTML = '';

            heroContents.forEach(content => {
                const row = document.createElement('tr');

                let bannerImg = '';
                let coverImg = '';
                let bannerUrl = '';
                let coverUrl = '';

                if (content.type === 'offer' && content.offer) {
                    bannerUrl = content.offer.banner_url;
                    coverUrl = content.offer.banner_cover_url;
                } else {
                    bannerUrl = content.banner_url;
                    coverUrl = content.banner_cover_url;
                }

                if (bannerUrl) {
                    bannerImg = `<img src="${bannerUrl}" class="image-preview" onclick="showImageModal('${bannerUrl}')" style="width: 60px; height: 40px;">`;
                }
                if (coverUrl) {
                    coverImg = `<img src="${coverUrl}" class="image-preview" onclick="showImageModal('${coverUrl}')" style="width: 60px; height: 40px;">`;
                }

                // 新的白名单显示逻辑
                let whitelistBadge = '<span class="badge bg-secondary">无限制</span>';
                if (content.whitelist) {
                    const entries = content.whitelist.entries || [];
                    const globalEnabled = content.whitelist.global || false;

                    if (entries.length > 0 || globalEnabled) {
                        let badgeText = '';
                        if (entries.length > 0) {
                            badgeText += `${entries.length}人`;
                        }
                        if (globalEnabled) {
                            badgeText += (badgeText ? ' + ' : '') + '全局';
                        }
                        whitelistBadge = `<span class="badge bg-warning">${badgeText}</span>`;
                    }
                }

                row.innerHTML = `
                    <td>${content.id}</td>
                    <td><span class="badge bg-${content.type === 'offer' ? 'primary' : 'success'}">${content.type}</span></td>
                    <td>${content.content_id || '-'}</td>
                    <td>${content.title}</td>
                    <td>${bannerImg}</td>
                    <td>${coverImg}</td>
                    <td>${content.sort_order}</td>
                    <td><span class="badge bg-${content.is_active ? 'success' : 'secondary'}">${content.is_active ? '启用' : '禁用'}</span></td>
                    <td>${whitelistBadge}</td>
                    <td>
                        <button class="btn btn-sm btn-primary me-1" onclick="editHeroContent(${content.id})">编辑</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteHeroContent(${content.id})">删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // 类型切换处理
        function onHeroTypeChange(prefix) {
            const typeSelect = document.getElementById(`${prefix}HeroType`);
            const offerSection = document.getElementById(`${prefix}OfferSection`);
            const landingPageSection = document.getElementById(`${prefix}LandingPageSection`);
            const imageUploadSection = document.getElementById(`${prefix}ImageUploadSection`);
            const contentIdLabel = document.querySelector(`label[for="${prefix}HeroContentId"]`);
            const contentIdInput = document.getElementById(`${prefix}HeroContentId`);

            if (typeSelect.value === 'offer') {
                offerSection.style.display = 'block';
                landingPageSection.style.display = 'none';
                imageUploadSection.style.display = 'none';
            } else if (typeSelect.value === 'landing-page' || typeSelect.value === 'tab-page' || typeSelect.value === 'path') {
                // landing-page、tab-page 和 path 都需要显示图片上传相关字段
                offerSection.style.display = 'none';
                landingPageSection.style.display = 'block';
                imageUploadSection.style.display = 'block';

                // 根据类型更新标签和占位符
                if (typeSelect.value === 'path') {
                    if (contentIdLabel) contentIdLabel.innerHTML = '小程序路径 <span class="text-danger">*</span>';
                    if (contentIdInput) contentIdInput.placeholder = '例如: /pages/profile/index';
                } else {
                    if (contentIdLabel) contentIdLabel.innerHTML = '页面标识 <span class="text-danger">*</span>';
                    if (contentIdInput) contentIdInput.placeholder = '例如: ceb202507';
                }
            } else {
                // 默认情况
                offerSection.style.display = 'none';
                landingPageSection.style.display = 'block';
                imageUploadSection.style.display = 'block';
            }
        }

        // 图片预览
        function previewHeroImage(url, previewId) {
            const preview = document.getElementById(previewId);
            if (url && url.trim() !== '') {
                preview.src = url;
                preview.style.display = 'block';
            } else {
                preview.style.display = 'none';
            }
        }

        // 创建Hero Content
        function createHeroContent() {
            const type = document.getElementById('createHeroType').value;
            const title = document.getElementById('createHeroTitle').value;
            const sortOrder = document.getElementById('createHeroSortOrder').value;
            const isActive = document.getElementById('createHeroIsActive').checked;

            if (!title.trim()) {
                showAlert('请输入标题', 'warning');
                return;
            }

            const formData = {
                type: type,
                title: title,
                sort_order: parseInt(sortOrder) || 0,
                is_active: isActive,
                whitelist: document.getElementById('createHeroWhitelist').value
            };

            if (type === 'offer') {
                const offerId = document.getElementById('createHeroOfferId').value;
                if (!offerId) {
                    showAlert('请选择Offer', 'warning');
                    return;
                }
                formData.content_id = offerId;
            } else {
                const contentId = document.getElementById('createHeroContentId').value;
                const bannerUrl = document.getElementById('createHeroBannerUrl').value;
                const coverUrl = document.getElementById('createHeroCoverUrl').value;

                if (!contentId.trim()) {
                    showAlert('请输入页面标识', 'warning');
                    return;
                }

                formData.content_id = contentId;
                formData.banner_url = bannerUrl;
                formData.banner_cover_url = coverUrl;
            }

            fetch('/api/admin/offers/hero-contents', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Hero Content创建成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('createHeroModal')).hide();
                        clearCreateHeroForm();
                        loadHeroContents();
                    } else {
                        let errorMsg = '创建失败: ' + data.message;
                        if (data.errors) {
                            const errorDetails = [];
                            for (const [field, messages] of Object.entries(data.errors)) {
                                errorDetails.push(`${field}: ${messages.join(', ')}`);
                            }
                            errorMsg += '\n' + errorDetails.join('\n');
                        }
                        showAlert(errorMsg, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('创建失败', 'danger');
                });
        }

        // 编辑Hero Content
        function editHeroContent(id) {
            const content = heroContents.find(c => c.id === id);
            if (!content) {
                showAlert('找不到Hero Content', 'danger');
                return;
            }

            // 填充表单
            document.getElementById('editHeroId').value = content.id;
            document.getElementById('editHeroType').value = content.type;
            document.getElementById('editHeroTitle').value = content.title;
            document.getElementById('editHeroSortOrder').value = content.sort_order;
            document.getElementById('editHeroIsActive').checked = content.is_active;

            // 初始化白名单
            initializeWhitelist('editHero', content.whitelist);

            // 根据类型显示相应区域
            onHeroTypeChange('edit');

            if (content.type === 'offer') {
                document.getElementById('editHeroOfferId').value = content.content_id;
            } else {
                document.getElementById('editHeroContentId').value = content.content_id;
                document.getElementById('editHeroBannerUrl').value = content.banner_url || '';
                document.getElementById('editHeroCoverUrl').value = content.banner_cover_url || '';

                // 预览图片和显示删除按钮
                if (content.banner_url) {
                    previewHeroImage(content.banner_url, 'editHeroBannerPreview');
                    document.getElementById('editHeroBannerDeleteBtn').style.display = 'block';
                } else {
                    document.getElementById('editHeroBannerDeleteBtn').style.display = 'none';
                }

                if (content.banner_cover_url) {
                    previewHeroImage(content.banner_cover_url, 'editHeroCoverPreview');
                    document.getElementById('editHeroCoverDeleteBtn').style.display = 'block';
                } else {
                    document.getElementById('editHeroCoverDeleteBtn').style.display = 'none';
                }
            }

            // 显示模态框
            const modal = new bootstrap.Modal(document.getElementById('editHeroModal'));
            modal.show();
        }

        // 更新Hero Content
        function updateHeroContent() {
            const id = document.getElementById('editHeroId').value;
            const type = document.getElementById('editHeroType').value;
            const title = document.getElementById('editHeroTitle').value;
            const sortOrder = document.getElementById('editHeroSortOrder').value;
            const isActive = document.getElementById('editHeroIsActive').checked;

            if (!title.trim()) {
                showAlert('请输入标题', 'warning');
                return;
            }

            const formData = {
                type: type,
                title: title,
                sort_order: parseInt(sortOrder) || 0,
                is_active: isActive,
                whitelist: document.getElementById('editHeroWhitelist').value
            };

            if (type === 'offer') {
                const offerId = document.getElementById('editHeroOfferId').value;
                if (!offerId) {
                    showAlert('请选择Offer', 'warning');
                    return;
                }
                formData.content_id = offerId;
            } else {
                const contentId = document.getElementById('editHeroContentId').value;
                const bannerUrl = document.getElementById('editHeroBannerUrl').value;
                const coverUrl = document.getElementById('editHeroCoverUrl').value;

                if (!contentId.trim()) {
                    showAlert('请输入页面标识', 'warning');
                    return;
                }

                formData.content_id = contentId;
                formData.banner_url = bannerUrl;
                formData.banner_cover_url = coverUrl;
            }

            fetch(`/api/admin/offers/hero-contents/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Hero Content更新成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('editHeroModal')).hide();
                        loadHeroContents();
                    } else {
                        let errorMsg = '更新失败: ' + data.message;
                        if (data.errors) {
                            const errorDetails = [];
                            for (const [field, messages] of Object.entries(data.errors)) {
                                errorDetails.push(`${field}: ${messages.join(', ')}`);
                            }
                            errorMsg += '\n' + errorDetails.join('\n');
                        }
                        showAlert(errorMsg, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('更新失败', 'danger');
                });
        }

        // 删除Hero Content
        function deleteHeroContent(id) {
            if (!confirm('确定要删除这个Hero Content吗？')) {
                return;
            }

            fetch(`/api/admin/offers/hero-contents/${id}`, {
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Hero Content删除成功', 'success');
                        loadHeroContents();
                    } else {
                        showAlert('删除失败: ' + data.message, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('删除失败', 'danger');
                });
        }

        // 上传Hero Landing Page图片
        function uploadHeroLandingPageImage(fileInput, type, prefix) {
            const file = fileInput.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);
            formData.append('type', type);

            // 显示上传中状态
            const previewId = `${prefix}Hero${type.charAt(0).toUpperCase() + type.slice(1)}Preview`;
            const urlInputId = `${prefix}Hero${type.charAt(0).toUpperCase() + type.slice(1)}Url`;
            const deleteButtonId = `${prefix}Hero${type.charAt(0).toUpperCase() + type.slice(1)}DeleteBtn`;

            const preview = document.getElementById(previewId);
            const urlInput = document.getElementById(urlInputId);
            const deleteButton = document.getElementById(deleteButtonId);

            // 显示加载状态
            urlInput.value = '正在上传...';
            fileInput.disabled = true;

            fetch('/api/admin/offers/upload-hero-landing-page-image', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    fileInput.disabled = false;
                    if (data.success) {
                        // 显示图片预览
                        preview.src = data.url;
                        preview.style.display = 'block';

                        // 设置URL
                        urlInput.value = data.url;

                        // 显示删除按钮
                        deleteButton.style.display = 'block';

                        // 清空文件输入
                        fileInput.value = '';

                        showAlert(`${type === 'banner' ? 'Banner' : 'Cover'}图片上传成功`, 'success');
                    } else {
                        urlInput.value = '';
                        showAlert('图片上传失败: ' + data.message, 'danger');
                    }
                })
                .catch(error => {
                    fileInput.disabled = false;
                    urlInput.value = '';
                    console.error('Error:', error);
                    showAlert('图片上传失败', 'danger');
                });
        }

        // 清除Hero图片
        function clearHeroImage(prefix) {
            const previewId = `${prefix}Preview`;
            const urlInputId = `${prefix}Url`;
            const deleteButtonId = `${prefix}DeleteBtn`;
            const fileInputId = `${prefix}File`;

            document.getElementById(previewId).style.display = 'none';
            document.getElementById(urlInputId).value = '';
            document.getElementById(deleteButtonId).style.display = 'none';
            if (document.getElementById(fileInputId)) {
                document.getElementById(fileInputId).value = '';
            }
        }

        // 清空创建表单
        function clearCreateHeroForm() {
            document.getElementById('createHeroForm').reset();
            document.getElementById('createHeroType').value = 'offer';
            document.getElementById('createHeroIsActive').checked = true;

            // 清除图片预览和按钮
            ['createHeroBanner', 'createHeroCover'].forEach(prefix => {
                clearHeroImage(prefix);
            });

            onHeroTypeChange('create');

            // 清空白名单
            initializeWhitelist('createHero', {});
        }

        // ===== Hero Content 白名单管理相关功能 =====

        // 添加手机号到白名单
        function addPhoneToWhitelist(prefix, phone) {
            if (!phone || !phone.trim()) return;

            phone = phone.trim();

            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showAlert('请输入正确的11位手机号', 'warning');
                return;
            }

            // 确保 whitelists 对象和子对象存在
            if (!window.whitelists) {
                window.whitelists = {};
            }
            if (!whitelists[prefix]) {
                whitelists[prefix] = { entries: [], global: false };
            }

            // 检查是否已存在
            const hashedMobile = CryptoJS.SHA256(phone).toString();
            const existingEntry = whitelists[prefix].entries.find(entry => entry.hashed_mobile === hashedMobile);
            if (existingEntry) {
                showAlert('该手机号已存在于白名单中', 'warning');
                return;
            }

            // 如果是编辑模式，通过API添加手机号（获取用户信息）
            if (prefix === 'editHero') {
                const heroContentId = document.getElementById('editHeroId').value;
                if (heroContentId) {
                    // 通过API添加，这样能获取到用户信息
                    adminFetch('/admin/global-whitelist/content/add-phone', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            phone: phone,
                            content_type: 'hero_content',
                            content_id: parseInt(heroContentId)
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // 更新本地白名单数据
                            whitelists[prefix] = {
                                entries: data.whitelist.entries || [],
                                global: data.whitelist.global || false
                            };
                            renderWhitelistTags(prefix);
                            updateWhitelistConfig(prefix);
                            showAlert('添加成功', 'success');
                        } else {
                            showAlert('添加失败: ' + (data.message || '未知错误'), 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error adding phone to whitelist:', error);
                        showAlert('添加失败', 'danger');
                    });
                    return;
                }
            }

            // 如果是编辑礼遇模式，通过API添加手机号（获取用户信息）
            if (prefix === 'editOffer') {
                const offerId = document.getElementById('editOfferId').value;
                if (offerId) {
                    // 通过API添加，这样能获取到用户信息
                    adminFetch('/admin/global-whitelist/content/add-phone', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            phone: phone,
                            content_type: 'offer',
                            content_id: parseInt(offerId)
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // 更新本地白名单数据
                            whitelists[prefix] = {
                                entries: data.whitelist.entries || [],
                                global: data.whitelist.global || false
                            };
                            renderWhitelistTags(prefix);
                            updateWhitelistConfig(prefix);
                            showAlert('添加成功', 'success');
                        } else {
                            showAlert('添加失败: ' + (data.message || '未知错误'), 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error adding phone to whitelist:', error);
                        showAlert('添加失败', 'danger');
                    });
                    return;
                }
            }

            // 如果是创建模式，直接在前端创建（用户信息为null）
            const phoneDisplay = phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
            const newEntry = {
                hashed_mobile: hashedMobile,
                phone_display: phoneDisplay,
                uid: null,
                nickname: null
            };

            whitelists[prefix].entries.push(newEntry);
            renderWhitelistTags(prefix);
            updateWhitelistConfig(prefix);
        }

        // 从白名单删除条目
        function removeFromWhitelist(prefix, index) {
            // 确保 whitelists 对象存在
            if (!window.whitelists) {
                window.whitelists = {};
            }
            if (!whitelists[prefix]) {
                whitelists[prefix] = { entries: [], global: false };
            }

            if (index >= 0 && index < whitelists[prefix].entries.length) {
                whitelists[prefix].entries.splice(index, 1);
                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            }
        }

        // 渲染白名单条目标签
        function renderWhitelistTags(prefix) {
            const container = document.getElementById(prefix + 'WhitelistTags');
            if (!container) return;

            // 确保 whitelists 对象存在
            if (!window.whitelists) {
                window.whitelists = {};
            }
            if (!whitelists[prefix]) {
                whitelists[prefix] = { entries: [], global: false };
            }

            const entries = whitelists[prefix].entries || [];
            const globalEnabled = whitelists[prefix].global || false;

            if (entries.length === 0 && !globalEnabled) {
                container.innerHTML = '<small class="text-muted">暂无白名单设置</small>';
                return;
            }

            let html = '';

            // 显示全局白名单状态
            if (globalEnabled) {
                html += `<span class="badge bg-success me-1 mb-1" style="font-size: 0.8em;">
                    <i class="fas fa-globe"></i> 全局白名单已启用
                </span>`;
            }

            // 显示具体条目
            entries.forEach((entry, index) => {
                const userInfo = entry.uid ? `${entry.nickname || '用户'} (${entry.uid})` : '待注册';
                const badgeClass = entry.uid ? 'bg-info' : 'bg-secondary';

                html += `<span class="badge ${badgeClass} me-1 mb-1" style="font-size: 0.8em;">
                    ${escapeHtml(entry.phone_display)} - ${escapeHtml(userInfo)}
                    <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.6em;" onclick="removeFromWhitelist('${prefix}', ${index})"></button>
                </span>`;
            });

            container.innerHTML = html;
        }

        // 更新白名单配置
        function updateWhitelistConfig(prefix) {
            const textarea = document.getElementById(prefix + 'Whitelist');
            const checkbox = document.getElementById(prefix + 'GlobalWhitelist');

            if (!textarea) return;

            // 确保 whitelists 对象存在
            if (!window.whitelists) {
                window.whitelists = {};
            }
            if (!whitelists[prefix]) {
                whitelists[prefix] = { entries: [], global: false };
            }

            // 从复选框获取全局白名单状态
            if (checkbox) {
                whitelists[prefix].global = checkbox.checked;
            }

            const whitelistConfig = {
                entries: whitelists[prefix].entries || [],
                global: whitelists[prefix].global || false
            };

            textarea.value = JSON.stringify(whitelistConfig, null, 2);
        }

        // 切换白名单JSON编辑模式
        function toggleWhitelistJson(prefix) {
            const textarea = document.getElementById(prefix + 'Whitelist');
            const tagsContainer = document.getElementById(prefix + 'WhitelistTags').parentElement.parentElement;

            // 确保 whitelists 对象存在
            if (!window.whitelists) {
                window.whitelists = {};
            }

            if (textarea.style.display === 'none') {
                // 显示JSON编辑器
                textarea.style.display = 'block';
                tagsContainer.style.display = 'none';

                // 尝试解析JSON并同步到白名单数组
                try {
                    const config = JSON.parse(textarea.value || '{}');
                    if (!whitelists[prefix]) {
                        whitelists[prefix] = { entries: [], global: false };
                    }
                    whitelists[prefix].entries = config.entries || [];

                    // 同步全局白名单状态
                    const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                    if (globalCheckbox) {
                        globalCheckbox.checked = config.global || false;
                    }
                } catch (e) {
                    console.warn('Invalid JSON in hero whitelist textarea');
                }
            } else {
                // 显示可视化编辑器
                textarea.style.display = 'none';
                tagsContainer.style.display = 'block';

                // 尝试解析JSON并重建标签
                try {
                    const config = JSON.parse(textarea.value || '{}');
                    if (!whitelists[prefix]) {
                        whitelists[prefix] = { entries: [], global: false };
                    }
                    whitelists[prefix].entries = config.entries || [];

                    // 同步全局白名单状态
                    const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                    if (globalCheckbox) {
                        globalCheckbox.checked = config.global || false;
                    }

                    renderWhitelistTags(prefix);
                } catch (e) {
                    showAlert('JSON格式错误，无法解析', 'danger');
                }
            }
        }

        // 从现有白名单初始化
        function initializeWhitelist(prefix, whitelist) {
            try {
                let parsedWhitelist;
                if (typeof whitelist === 'string') {
                    parsedWhitelist = JSON.parse(whitelist || '{}');
                } else if (typeof whitelist === 'object' && whitelist !== null) {
                    parsedWhitelist = whitelist;
                } else {
                    parsedWhitelist = {};
                }

                // 初始化手机号白名单数组
                whitelists[prefix] = {
                    entries: parsedWhitelist.entries || [],
                    global: parsedWhitelist.global || false
                };

                // 设置全局白名单状态
                const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                if (globalCheckbox) {
                    globalCheckbox.checked = whitelists[prefix].global;
                }

                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            } catch (e) {
                console.warn('Failed to parse existing hero whitelist:', e);
                whitelists[prefix] = { entries: [], global: false };

                // 重置全局白名单状态
                const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                if (globalCheckbox) {
                    globalCheckbox.checked = false;
                }

                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            }
        }

        // 获取白名单配置（用于保存到后端）
        function getWhitelistConfig(prefix) {
            if (!window.whitelists || !whitelists[prefix]) {
                return null;
            }

            const config = whitelists[prefix];
            const entries = config.entries || [];
            const global = config.global || false;

            // 如果没有任何白名单设置，返回null
            if (!global && entries.length === 0) {
                return null;
            }

            return {
                global: global,
                entries: entries
            };
        }

        // ===== Hero Content 白名单辅助功能 =====

        // 通用转义HTML函数 (if not already defined)
        function escapeHtml(text) {
            var map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, function (m) { return map[m]; });
        }

        // 更新场景选择下拉框的显示文本
        function updateTopicsDisplay(type) {
            const topicLabels = {
                'overseas': '出境旅行',
                'students': '出国留学',
                'local': '本地生活',
                'haitao': '海淘',
                'inbound': '入境旅行'
            };

            const checkboxes = document.querySelectorAll(`.${type}-topic-checkbox`);
            const selectedTopics = [];

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedTopics.push(topicLabels[checkbox.value] || checkbox.value);
                }
            });

            const displaySpan = document.getElementById(`${type}TopicsDisplay`);
            if (selectedTopics.length === 0) {
                displaySpan.textContent = '请选择场景...';
                displaySpan.classList.add('text-muted');
            } else {
                displaySpan.textContent = selectedTopics.join(', ');
                displaySpan.classList.remove('text-muted');
            }
        }

        // 更新国家/地区选择下拉框的显示文本
        function updateRegionsDisplay(type) {
            const checkboxes = document.querySelectorAll(`.${type}-region-checkbox`);
            const selectedRegions = [];

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedRegions.push(checkbox.value);
                }
            });

            const displaySpan = document.getElementById(`${type}RegionsDisplay`);
            if (selectedRegions.length === 0) {
                displaySpan.textContent = '请选择国家/地区...';
                displaySpan.classList.add('text-muted');
            } else {
                // 显示前5个，如果超过5个则显示"+N"
                if (selectedRegions.length <= 5) {
                    displaySpan.textContent = selectedRegions.join(', ');
                } else {
                    displaySpan.textContent = selectedRegions.slice(0, 5).join(', ') + ` +${selectedRegions.length - 5}`;
                }
                displaySpan.classList.remove('text-muted');
            }
        }

        // 更新分类选择下拉框的显示文本
        function updateTagsDisplay(type) {
            const checkboxes = document.querySelectorAll(`.${type}-tag-checkbox`);
            const selectedTags = [];

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedTags.push(checkbox.value);
                }
            });

            const displaySpan = document.getElementById(`${type}TagsDisplay`);
            if (selectedTags.length === 0) {
                displaySpan.textContent = '请选择分类...';
                displaySpan.classList.add('text-muted');
            } else {
                // 显示前5个，如果超过5个则显示"+N"
                if (selectedTags.length <= 5) {
                    displaySpan.textContent = selectedTags.join(', ');
                } else {
                    displaySpan.textContent = selectedTags.slice(0, 5).join(', ') + ` +${selectedTags.length - 5}`;
                }
                displaySpan.classList.remove('text-muted');
            }
        }

        // 更新适用卡种选择下拉框的显示文本
        function updateCardTypesDisplay(type) {
            const checkboxes = document.querySelectorAll(`.${type}-cardtype-checkbox`);
            const selectedCardTypes = [];

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedCardTypes.push(checkbox.value);
                }
            });

            const displaySpan = document.getElementById(`${type}CardTypesDisplay`);
            if (selectedCardTypes.length === 0) {
                displaySpan.textContent = '请选择适用卡种...';
                displaySpan.classList.add('text-muted');
            } else {
                displaySpan.textContent = selectedCardTypes.join(', ');
                displaySpan.classList.remove('text-muted');
            }
        }

        function updateProductLevelsDisplay(type) {
            const checkboxes = document.querySelectorAll(`.${type}-productlevel-checkbox`);
            const selectedLevels = [];

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedLevels.push(checkbox.value);
                }
            });

            const displaySpan = document.getElementById(`${type}ProductLevelsDisplay`);
            if (selectedLevels.length === 0) {
                displaySpan.textContent = '请选择适用卡等级...';
                displaySpan.classList.add('text-muted');
            } else {
                displaySpan.textContent = selectedLevels.join(', ');
                displaySpan.classList.remove('text-muted');
            }
        }

        // 清空编辑礼遇的适用卡种选择
        function clearEditCardTypes() {
            document.querySelectorAll('.edit-cardtype-checkbox').forEach(cb => cb.checked = false);
            updateCardTypesDisplay('edit');
        }

        // 清空编辑礼遇的适用卡等级选择
        function clearEditProductLevels() {
            document.querySelectorAll('.edit-productlevel-checkbox').forEach(cb => cb.checked = false);
            updateProductLevelsDisplay('edit');
        }

        // 处理地区分组选择（当选择分组时，自动选择/取消所有子项）
        function handleRegionGroupChange(type, groupCheckbox) {
            const group = groupCheckbox.dataset.group;
            const isChecked = groupCheckbox.checked;

            // 找到该分组下的所有子项
            const childCheckboxes = document.querySelectorAll(`.${type}-region-checkbox[data-parent="${group}"]`);

            childCheckboxes.forEach(childCheckbox => {
                childCheckbox.checked = isChecked;
            });

            updateRegionsDisplay(type);
        }

        // 处理子项选择（当有任意子项选中时，自动选中分组；当所有子项都取消时，取消分组）
        function handleRegionCountryChange(type, countryCheckbox) {
            const parent = countryCheckbox.dataset.parent;
            if (!parent) return;

            // 找到父分组复选框
            const groupCheckbox = document.querySelector(`.${type}-region-checkbox[data-group="${parent}"]`);
            if (!groupCheckbox) return;

            // 找到该分组下的所有子项
            const childCheckboxes = document.querySelectorAll(`.${type}-region-checkbox[data-parent="${parent}"]`);

            // 检查是否有任意子项被选中
            const anyChecked = Array.from(childCheckboxes).some(cb => cb.checked);

            // 如果有任意子项选中，选中分组；否则取消分组
            groupCheckbox.checked = anyChecked;

            updateRegionsDisplay(type);
        }

        // 初始化场景选择和国家/地区选择下拉框事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 为编辑表单的场景复选框添加事件监听
            document.querySelectorAll('.edit-topic-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateTopicsDisplay('edit');
                });
            });

            // 为创建表单的场景复选框添加事件监听
            document.querySelectorAll('.create-topic-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateTopicsDisplay('create');
                });
            });

            // 为编辑表单的国家/地区复选框添加事件监听
            document.querySelectorAll('.edit-region-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    if (this.classList.contains('region-group')) {
                        // 这是一个分组复选框
                        handleRegionGroupChange('edit', this);
                    } else if (this.classList.contains('region-country')) {
                        // 这是一个国家复选框
                        handleRegionCountryChange('edit', this);
                    } else {
                        // 其他情况，只更新显示
                        updateRegionsDisplay('edit');
                    }
                });
            });

            // 为创建表单的国家/地区复选框添加事件监听
            document.querySelectorAll('.create-region-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    if (this.classList.contains('region-group')) {
                        // 这是一个分组复选框
                        handleRegionGroupChange('create', this);
                    } else if (this.classList.contains('region-country')) {
                        // 这是一个国家复选框
                        handleRegionCountryChange('create', this);
                    } else {
                        // 其他情况，只更新显示
                        updateRegionsDisplay('create');
                    }
                });
            });

            // 为编辑表单的分类复选框添加事件监听
            document.querySelectorAll('.edit-tag-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateTagsDisplay('edit');
                });
            });

            // 为创建表单的分类复选框添加事件监听
            document.querySelectorAll('.create-tag-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateTagsDisplay('create');
                });
            });

            // 为编辑表单的适用卡种复选框添加事件监听
            document.querySelectorAll('.edit-cardtype-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateCardTypesDisplay('edit');
                });
            });

            // 为创建表单的适用卡种复选框添加事件监听
            document.querySelectorAll('.create-cardtype-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateCardTypesDisplay('create');
                });
            });

            // 为编辑表单的适用卡等级复选框添加事件监听
            document.querySelectorAll('.edit-productlevel-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateProductLevelsDisplay('edit');
                });
            });

            // 为创建表单的适用卡等级复选框添加事件监听
            document.querySelectorAll('.create-productlevel-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateProductLevelsDisplay('create');
                });
            });
        });

        // ============== 办卡专区（Makes）管理 ==============
        let makeOptions = null;
        let makeIssuers = null;  // 所有发卡行列表
        let currentMakePage = 1;

        // 初始化办卡专区
        document.getElementById('makes-tab').addEventListener('shown.bs.tab', function() {
            saveActiveTab('makes-tab');
            document.getElementById('createOfferBtn').style.display = 'none';
            if (!makeOptions) {
                loadMakeOptions();
            }
            if (!makeIssuers) {
                loadMakeIssuers();
            }
            loadMakes();
            // 显示缓存功能提示（仅在用户手动切换时）
            if (!isPageInitializing) {
                showTabCacheNotice();
            }
        });

        // 搜索框回车事件
        document.getElementById('makeSearchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                loadMakes();
            }
        });

        // 加载筛选选项
        function loadMakeOptions() {
            adminFetch('/api/admin/makes/options')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        makeOptions = data.data;

                        // 填充发卡行筛选
                        const issuerFilter = document.getElementById('makeIssuerFilter');
                        makeOptions.issuers.forEach(issuer => {
                            const option = document.createElement('option');
                            option.value = issuer.code;
                            option.textContent = issuer.name;
                            issuerFilter.appendChild(option);
                        });

                        // 填充卡类型筛选
                        const cardTypeFilter = document.getElementById('makeCardTypeFilter');
                        const cardTypeSelect = document.getElementById('makeCardType');
                        makeOptions.card_types.forEach(type => {
                            const option1 = document.createElement('option');
                            option1.value = type;
                            option1.textContent = type;
                            cardTypeFilter.appendChild(option1);

                            const option2 = document.createElement('option');
                            option2.value = type;
                            option2.textContent = type;
                            cardTypeSelect.appendChild(option2);
                        });

                        // 填充卡等级筛选
                        const cardProductFilter = document.getElementById('makeCardProductFilter');
                        const cardProductSelect = document.getElementById('makeCardProduct');
                        makeOptions.card_products.forEach(product => {
                            const option1 = document.createElement('option');
                            option1.value = product;
                            option1.textContent = product;
                            cardProductFilter.appendChild(option1);

                            const option2 = document.createElement('option');
                            option2.value = product;
                            option2.textContent = product;
                            cardProductSelect.appendChild(option2);
                        });

                        // 填充主题选择（Bootstrap dropdown 多选）
                        const topicsDropdownMenu = document.getElementById('makeTopicsDropdownMenu');
                        topicsDropdownMenu.innerHTML = '';
                        makeOptions.topics.forEach((topic, index) => {
                            const li = document.createElement('li');
                            li.innerHTML = `
                                <div class="form-check px-3 py-2">
                                    <input class="form-check-input make-topic-checkbox" type="checkbox" value="${topic}" id="makeTopic${index}" onchange="updateMakeTopicsDisplay()">
                                    <label class="form-check-label w-100" for="makeTopic${index}">${topic}</label>
                                </div>
                            `;
                            topicsDropdownMenu.appendChild(li);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading make options:', error);
                });
        }

        // 加载发卡行列表（用于表单选择）
        function loadMakeIssuers() {
            adminFetch('/api/admin/campaigns/issuers')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        makeIssuers = data.data;
                        const select = document.getElementById('makeIssuerSelect');
                        // 清空现有选项（保留第一个"请选择"）
                        select.innerHTML = '<option value="">请选择发卡行...</option>';
                        makeIssuers.forEach(issuer => {
                            const option = document.createElement('option');
                            option.value = issuer.code;
                            option.textContent = `${issuer.name} (${issuer.code})`;
                            option.dataset.name = issuer.name;
                            select.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading issuers for make:', error);
                });
        }

        // 发卡行选择变化事件
        document.getElementById('makeIssuerSelect').addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption.value) {
                document.getElementById('makeIssuerCode').value = selectedOption.value;
                document.getElementById('makeIssuerName').value = selectedOption.dataset.name || '';
            } else {
                document.getElementById('makeIssuerCode').value = '';
                document.getElementById('makeIssuerName').value = '';
            }
        });

        // 加载卡片列表
        function loadMakes(page = 1) {
            currentMakePage = page;
            const search = document.getElementById('makeSearchInput').value;
            const issuerCode = document.getElementById('makeIssuerFilter').value;
            const cardType = document.getElementById('makeCardTypeFilter').value;
            const cardProduct = document.getElementById('makeCardProductFilter').value;
            const status = document.getElementById('makeStatusFilter').value;
            const perPage = document.getElementById('makePerPageSelect').value;

            const params = new URLSearchParams();
            if (search) params.append('search', search);
            if (issuerCode) params.append('issuer_code', issuerCode);
            if (cardType) params.append('card_type', cardType);
            if (cardProduct) params.append('card_product', cardProduct);
            if (status !== '') params.append('status', status);
            params.append('per_page', perPage);
            params.append('page', page);

            document.getElementById('makesLoadingIndicator').style.display = 'block';

            adminFetch(`/api/admin/makes/api?${params.toString()}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('makesLoadingIndicator').style.display = 'none';

                    if (data.success) {
                        renderMakesTable(data.data);
                        renderMakesPagination(data.pagination);
                    } else {
                        showMakeAlert('加载失败: ' + (data.message || '未知错误'), 'error');
                    }
                })
                .catch(error => {
                    document.getElementById('makesLoadingIndicator').style.display = 'none';
                    console.error('Error loading makes:', error);
                    showMakeAlert('加载失败', 'error');
                });
        }

        // 渲染卡片表格
        function renderMakesTable(makes) {
            const tbody = document.getElementById('makesTableBody');
            tbody.innerHTML = '';

            if (makes.length === 0) {
                tbody.innerHTML = '<tr><td colspan="10" class="text-center text-muted py-4">暂无数据</td></tr>';
                return;
            }

            makes.forEach(make => {
                // 处理topics数组，生成标签HTML
                let topicsHtml = '-';
                if (make.topics && Array.isArray(make.topics) && make.topics.length > 0) {
                    topicsHtml = make.topics.map(topic =>
                        `<span class="badge bg-info text-white me-1 mb-1">${escapeHtml(topic)}</span>`
                    ).join('');
                }

                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${make.id}</td>
                    <td>
                        ${make.thumbnail_url
                            ? `<img src="${make.thumbnail_url}" class="img-thumbnail" style="width: 80px; height: 50px; object-fit: cover; cursor: pointer;" onclick="showImageModal('${make.thumbnail_url}')">`
                            : '<div class="bg-light d-flex align-items-center justify-content-center rounded" style="width: 80px; height: 50px;"><i class="fas fa-credit-card text-muted"></i></div>'
                        }
                    </td>
                    <td>
                        <div class="fw-bold">${escapeHtml(make.name)}</div>
                        ${make.subtitle ? `<small class="text-muted">${escapeHtml(make.subtitle)}</small>` : ''}
                    </td>
                    <td>${escapeHtml(make.issuer_name)}</td>
                    <td>${make.card_type || '-'}</td>
                    <td>${make.card_product || '-'}</td>
                    <td>${topicsHtml}</td>
                    <td><span class="badge bg-primary">${make.priority || 0}</span></td>
                    <td>
                        <span class="badge ${make.status === 1 ? 'bg-success' : 'bg-secondary'}"
                              style="cursor: pointer;" onclick="toggleMakeStatus(${make.id})">
                            ${make.status === 1 ? '启用' : '禁用'}
                        </span>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" onclick="editMake(${make.id})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="deleteMake(${make.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // 渲染分页
        function renderMakesPagination(pagination) {
            const info = document.getElementById('makesPaginationInfo');
            const nav = document.getElementById('makesPagination');

            const start = (pagination.current_page - 1) * pagination.per_page + 1;
            const end = Math.min(pagination.current_page * pagination.per_page, pagination.total);
            info.textContent = `显示 ${start}-${end} 条，共 ${pagination.total} 条`;

            nav.innerHTML = '';

            // 上一页
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${pagination.current_page === 1 ? 'disabled' : ''}`;
            prevLi.innerHTML = `<a class="page-link" href="#" onclick="loadMakes(${pagination.current_page - 1}); return false;">上一页</a>`;
            nav.appendChild(prevLi);

            // 页码
            for (let i = 1; i <= pagination.last_page; i++) {
                if (i === 1 || i === pagination.last_page ||
                    (i >= pagination.current_page - 2 && i <= pagination.current_page + 2)) {
                    const li = document.createElement('li');
                    li.className = `page-item ${i === pagination.current_page ? 'active' : ''}`;
                    li.innerHTML = `<a class="page-link" href="#" onclick="loadMakes(${i}); return false;">${i}</a>`;
                    nav.appendChild(li);
                } else if (i === pagination.current_page - 3 || i === pagination.current_page + 3) {
                    const li = document.createElement('li');
                    li.className = 'page-item disabled';
                    li.innerHTML = '<span class="page-link">...</span>';
                    nav.appendChild(li);
                }
            }

            // 下一页
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${pagination.current_page === pagination.last_page ? 'disabled' : ''}`;
            nextLi.innerHTML = `<a class="page-link" href="#" onclick="loadMakes(${pagination.current_page + 1}); return false;">下一页</a>`;
            nav.appendChild(nextLi);
        }

        // 显示卡片模态框
        function showMakeModal(makeId = null) {
            const modal = new bootstrap.Modal(document.getElementById('makeModal'));
            const title = document.getElementById('makeModalTitle');
            const form = document.getElementById('makeForm');

            // 重置表单
            form.reset();
            document.getElementById('makeId').value = '';
            document.getElementById('makeIssuerCode').value = '';
            document.getElementById('makeIssuerName').value = '';
            document.getElementById('makeThumbnailPreview').style.display = 'none';
            document.getElementById('makeCardArtPreview').style.display = 'none';

            // 重置主题选择（dropdown 多选）
            document.querySelectorAll('.make-topic-checkbox').forEach(cb => cb.checked = false);
            document.getElementById('makeTopicsDisplay').textContent = '请选择卡片主题...';

            if (makeId) {
                title.textContent = '编辑卡片';
                loadMakeData(makeId);
            } else {
                title.textContent = '添加卡片';
            }

            modal.show();
        }

        // 加载卡片数据
        function loadMakeData(makeId) {
            adminFetch(`/api/admin/makes/${makeId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const make = data.data;
                        document.getElementById('makeId').value = make.id;
                        document.getElementById('makeIssuerCode').value = make.issuer_code || '';
                        document.getElementById('makeIssuerName').value = make.issuer_name || '';
                        document.getElementById('makeIssuerSelect').value = make.issuer_code || '';
                        document.getElementById('makeCode').value = make.code || '';
                        document.getElementById('makeName').value = make.name || '';
                        document.getElementById('makeSubtitle').value = make.subtitle || '';
                        document.getElementById('makeCardType').value = make.card_type || '';
                        document.getElementById('makeCardProduct').value = make.card_product || '';
                        document.getElementById('makeStatus').value = make.status;
                        document.getElementById('makePriority').value = make.priority || 0;
                        document.getElementById('makeThumbnailUrl').value = make.thumbnail_url || '';
                        document.getElementById('makeCardArtUrl').value = make.card_art_url || '';
                        document.getElementById('makeDescription').value = make.description || '';
                        document.getElementById('makeBenefitDescription').value = make.benefit_description || '';
                        document.getElementById('makeActionText').value = make.action_text || '';
                        document.getElementById('makeExternalUrl').value = make.external_url || '';
                        document.getElementById('makeEnableWebview').checked = make.enable_webview || false;

                        // 设置主题（dropdown 多选）
                        document.querySelectorAll('.make-topic-checkbox').forEach(cb => cb.checked = false);
                        if (make.topics && Array.isArray(make.topics)) {
                            make.topics.forEach(topic => {
                                const checkbox = document.querySelector(`.make-topic-checkbox[value="${topic}"]`);
                                if (checkbox) checkbox.checked = true;
                            });
                        }
                        updateMakeTopicsDisplay();

                        // 显示图片预览
                        if (make.thumbnail_url) {
                            previewMakeImage(make.thumbnail_url, 'makeThumbnailPreview');
                        }
                        if (make.card_art_url) {
                            previewMakeImage(make.card_art_url, 'makeCardArtPreview');
                        }
                    } else {
                        showMakeAlert('加载数据失败', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error loading make data:', error);
                    showMakeAlert('加载数据失败', 'error');
                });
        }

        // 保存卡片
        function saveMake() {
            const makeId = document.getElementById('makeId').value;
            const isEdit = !!makeId;

            // 获取选中的主题（从 dropdown 多选）
            const selectedTopics = [];
            document.querySelectorAll('.make-topic-checkbox:checked').forEach(cb => {
                selectedTopics.push(cb.value);
            });

            const data = {
                issuer_code: document.getElementById('makeIssuerCode').value,
                issuer_name: document.getElementById('makeIssuerName').value,
                code: document.getElementById('makeCode').value || null,
                name: document.getElementById('makeName').value,
                subtitle: document.getElementById('makeSubtitle').value || null,
                card_type: document.getElementById('makeCardType').value || null,
                card_product: document.getElementById('makeCardProduct').value || null,
                status: parseInt(document.getElementById('makeStatus').value),
                priority: parseInt(document.getElementById('makePriority').value) || 0,
                topics: selectedTopics.length > 0 ? selectedTopics : null,
                thumbnail_url: document.getElementById('makeThumbnailUrl').value || null,
                card_art_url: document.getElementById('makeCardArtUrl').value || null,
                description: document.getElementById('makeDescription').value || null,
                benefit_description: document.getElementById('makeBenefitDescription').value || null,
                action_text: document.getElementById('makeActionText').value || null,
                external_url: document.getElementById('makeExternalUrl').value || null,
                enable_webview: document.getElementById('makeEnableWebview').checked,
            };

            const url = isEdit ? `/api/admin/makes/${makeId}` : '/api/admin/makes';
            const method = isEdit ? 'PUT' : 'POST';

            adminFetch(url, {
                method: method,
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMakeAlert(data.message, 'success');
                    bootstrap.Modal.getInstance(document.getElementById('makeModal')).hide();
                    loadMakes(currentMakePage);
                } else {
                    if (data.errors) {
                        let errorMsg = '';
                        Object.values(data.errors).forEach(errors => {
                            errors.forEach(error => {
                                errorMsg += error + '\n';
                            });
                        });
                        showMakeAlert(errorMsg, 'error');
                    } else {
                        showMakeAlert(data.message || '保存失败', 'error');
                    }
                }
            })
            .catch(error => {
                console.error('Error saving make:', error);
                showMakeAlert('保存失败', 'error');
            });
        }

        // 编辑卡片
        function editMake(makeId) {
            showMakeModal(makeId);
        }

        // 删除卡片
        function deleteMake(makeId) {
            if (!confirm('确定要删除这个卡片吗？此操作不可撤销。')) {
                return;
            }

            adminFetch(`/api/admin/makes/${makeId}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMakeAlert(data.message, 'success');
                    loadMakes(currentMakePage);
                } else {
                    showMakeAlert(data.message || '删除失败', 'error');
                }
            })
            .catch(error => {
                console.error('Error deleting make:', error);
                showMakeAlert('删除失败', 'error');
            });
        }

        // 切换状态
        function toggleMakeStatus(makeId) {
            adminFetch(`/api/admin/makes/${makeId}/toggle-status`, {
                method: 'PATCH'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMakeAlert(data.message, 'success');
                    loadMakes(currentMakePage);
                } else {
                    showMakeAlert(data.message || '操作失败', 'error');
                }
            })
            .catch(error => {
                console.error('Error toggling make status:', error);
                showMakeAlert('操作失败', 'error');
            });
        }

        // 上传图片
        function uploadMakeImage(fileInput, urlInputId, previewId) {
            const file = fileInput.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);

            fetch('/api/admin/makes/upload-image', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById(urlInputId).value = data.url;
                    previewMakeImage(data.url, previewId);
                    showMakeAlert('图片上传成功', 'success');
                } else {
                    showMakeAlert('图片上传失败: ' + (data.message || '未知错误'), 'error');
                }
            })
            .catch(error => {
                console.error('Error uploading image:', error);
                showMakeAlert('图片上传失败', 'error');
            });
        }

        // 更新卡片主题下拉按钮显示
        function updateMakeTopicsDisplay() {
            const selectedTopics = [];
            document.querySelectorAll('.make-topic-checkbox:checked').forEach(cb => {
                selectedTopics.push(cb.value);
            });

            const displaySpan = document.getElementById('makeTopicsDisplay');
            if (selectedTopics.length > 0) {
                displaySpan.textContent = selectedTopics.join('、');
            } else {
                displaySpan.textContent = '请选择卡片主题...';
            }
        }

        // 预览图片
        function previewMakeImage(url, previewId) {
            const img = document.getElementById(previewId);
            if (url) {
                img.src = url;
                img.onerror = function() {
                    this.style.display = 'none';
                };
                img.onload = function() {
                    this.style.display = 'block';
                };
            } else {
                img.style.display = 'none';
            }
        }

        // 显示提示
        function showMakeAlert(message, type = 'info') {
            const alertClass = type === 'success' ? 'alert-success' :
                              type === 'error' ? 'alert-danger' : 'alert-info';

            const alertHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show position-fixed"
                     style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;

            document.body.insertAdjacentHTML('beforeend', alertHtml);

            setTimeout(() => {
                const alert = document.querySelector('.alert:last-of-type');
                if (alert) {
                    bootstrap.Alert.getOrCreateInstance(alert).close();
                }
            }, 3000);
        }

        // HTML转义
        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
@endsection

@push('scripts')
@endpush