<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统管理后台 - 驾考灯光模拟</title>
  <link rel="stylesheet" href="/static/css/main.css">
  <style>
    /* 头像上传样式 */
    .avatar-upload {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    .avatar-preview {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px dashed #d9d9d9;
      cursor: pointer;
      transition: all 0.3s;
    }
    .avatar-preview:hover {
      border-color: #1677ff;
    }
    .avatar-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .avatar-preview svg {
      width: 32px;
      height: 32px;
      fill: #8c8c8c;
    }
    .avatar-upload-btn {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .avatar-upload-btn .btn {
      min-width: 100px;
    }
    .avatar-upload-tip {
      font-size: 12px;
      color: #8c8c8c;
    }
    
    /* 表格中的头像 */
    .table-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    .table-avatar-placeholder {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- 语言切换按钮 -->
  <button class="lang-switch-btn" onclick="toggleLang()" id="globalLangBtn">ئۇيغۇرچە</button>

  <!-- 登录 -->
  <div id="loginWrap">
    <div class="verify-wrap">
      <div class="verify-box">
        <div class="verify-logo">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        </div>
        <h1 class="verify-title" data-lang="adminLogin">系统管理后台</h1>
        <p class="verify-sub" data-lang="adminLoginDesc">管理员登录</p>
        <div class="form-group" style="text-align:left;">
          <label class="form-label" data-lang="username">用户名</label>
          <input type="text" class="form-control" id="adminUser" data-lang-placeholder="username" placeholder="请输入用户名">
        </div>
        <div class="form-group" style="text-align:left;">
          <label class="form-label" data-lang="password">密码</label>
          <input type="password" class="form-control" id="adminPass" data-lang-placeholder="password" placeholder="请输入密码">
        </div>
        <button class="btn btn-primary btn-lg btn-block" onclick="adminLogin()" data-lang="login">登录</button>
        <a href="/" style="display:inline-block;margin-top:16px;font-size:13px;color:#8c8c8c;" data-lang="backToStudent">返回学生端</a>
      </div>
    </div>
  </div>

  <!-- 主界面 -->
  <div id="adminMain" style="display:none;">
    <!-- 水印 -->
    <div class="watermark-layer" id="adminWatermark" data-text=""></div>

    <header class="app-header">
      <div class="header-left">
        <div class="header-logo">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        </div>
        <span class="header-title" data-lang="adminLogin">系统管理后台</span>
      </div>
      <div class="header-right">
        <span class="header-user" id="adminName"></span>
        <button class="lang-btn" onclick="showChangePassword()" data-lang="changePassword">修改密码</button>
        <button class="lang-btn" onclick="adminLogout()" data-lang="logout">退出</button>
      </div>
    </header>

    <!-- 侧边栏 -->
    <div class="admin-sidebar">
      <div class="side-item active" onclick="switchPage('dashboard', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg></span>
        <span data-lang="dashboard">数据概览</span>
      </div>
      <div class="side-item" onclick="switchPage('students', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></span>
        <span data-lang="studentManage">学员管理</span>
      </div>
      <div class="side-item" onclick="switchPage('coaches', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></span>
        <span data-lang="coachManage">教练管理</span>
      </div>
      <div class="side-item" onclick="switchPage('tickets', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 12c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h13c.55 0 1-.45 1-1zm-6-6H6c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm0 8H6c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zM3 4v16h18V4H3zm16 14H5V6h14v12z"/></svg></span>
        <span data-lang="ticketManage">取号管理</span>
      </div>
      <div class="side-item" onclick="switchPage('records', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg></span>
        <span data-lang="records">使用记录</span>
      </div>
      <div class="side-item" onclick="switchPage('audios', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg></span>
        <span data-lang="audioManage">音频管理</span>
      </div>
      <div class="side-item" onclick="switchPage('questions', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg></span>
        <span data-lang="questionManage">题目管理</span>
      </div>
      <div class="side-item" onclick="switchPage('config', this)">
        <span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg></span>
        <span data-lang="config">系统配置</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="admin-main">
      <!-- 数据概览 -->
      <div class="admin-page active" id="page-dashboard">
        <h2 style="margin-bottom:20px;" data-lang="dashboard">数据概览</h2>
        <div class="stat-row">
          <div class="stat-box">
            <div class="stat-num" id="totalStudents">0</div>
            <div class="stat-label" data-lang="totalStudents">学员总数</div>
          </div>
          <div class="stat-box">
            <div class="stat-num" id="totalCoaches">0</div>
            <div class="stat-label" data-lang="totalCoaches">教练总数</div>
          </div>
          <div class="stat-box">
            <div class="stat-num" id="todayTickets">0</div>
            <div class="stat-label" data-lang="todayTickets">今日取号</div>
          </div>
          <div class="stat-box">
            <div class="stat-num" id="totalRecords">0</div>
            <div class="stat-label" data-lang="totalRecords">总记录</div>
          </div>
        </div>
      </div>

      <!-- 学员管理 -->
      <div class="admin-page" id="page-students">
        <div class="flex-between mb-12">
          <h2 data-lang="studentManage">学员管理</h2>
          <button class="btn btn-primary" onclick="showAddStudent()" data-lang="addStudent">添加学员</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="avatar">头像</th>
                    <th data-lang="name">姓名</th>
                    <th data-lang="phoneLast4">手机后4位</th>
                    <th data-lang="fullPhone">完整手机</th>
                    <th data-lang="coach">教练</th>
                    <th data-lang="action">操作</th>
                  </tr>
                </thead>
                <tbody id="studentsTable"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 教练管理 -->
      <div class="admin-page" id="page-coaches">
        <div class="flex-between mb-12">
          <h2 data-lang="coachManage">教练管理</h2>
          <button class="btn btn-primary" onclick="showAddCoach()" data-lang="addCoach">添加教练</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="avatar">头像</th>
                    <th data-lang="username">用户名</th>
                    <th data-lang="name">姓名</th>
                    <th data-lang="phone">手机</th>
                    <th data-lang="action">操作</th>
                  </tr>
                </thead>
                <tbody id="coachesTable"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 取号管理 -->
      <div class="admin-page" id="page-tickets">
        <div class="flex-between mb-12">
          <h2 data-lang="todayTicketStatus">今日取号情况</h2>
          <button class="btn btn-outline" onclick="loadTickets()" data-lang="refresh">刷新</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="ticketNo">票号</th>
                    <th data-lang="student">学员</th>
                    <th data-lang="phone">手机</th>
                    <th data-lang="coach">教练</th>
                    <th data-lang="session">时段</th>
                    <th data-lang="status">状态</th>
                    <th data-lang="action">操作</th>
                  </tr>
                </thead>
                <tbody id="ticketsTable"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用记录 -->
      <div class="admin-page" id="page-records">
        <div class="flex-between mb-12">
          <h2 data-lang="records">使用记录</h2>
          <button class="btn btn-outline" onclick="exportRecords()" data-lang="export">导出WPS</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="student">学员</th>
                    <th data-lang="phone">手机</th>
                    <th data-lang="actionType">操作</th>
                    <th data-lang="detail">详情</th>
                    <th data-lang="ip">IP</th>
                    <th data-lang="time">时间</th>
                  </tr>
                </thead>
                <tbody id="recordsTable"></tbody>
              </table>
            </div>
          </div>
        </div>
        <div id="recordsPagination" style="margin-top:16px;text-align:center;"></div>
      </div>

      <!-- 音频管理 -->
      <div class="admin-page" id="page-audios">
        <div class="flex-between mb-12">
          <h2 data-lang="audioManage">音频管理</h2>
          <button class="btn btn-primary" onclick="showAddAudio()" data-lang="addAudio">添加音频</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="title">标题</th>
                    <th data-lang="titleUg">维语标题</th>
                    <th data-lang="file">文件</th>
                    <th data-lang="sort">排序</th>
                    <th data-lang="action">操作</th>
                  </tr>
                </thead>
                <tbody id="audiosTable"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 题目管理 -->
      <div class="admin-page" id="page-questions">
        <div class="flex-between mb-12">
          <h2 data-lang="questionManage">题目管理</h2>
          <button class="btn btn-primary" onclick="showAddQuestion()" data-lang="addQuestion">添加题目</button>
        </div>
        <div class="card">
          <div class="card-body no-pad">
            <div class="table-wrap">
              <table class="table">
                <thead>
                  <tr>
                    <th data-lang="questionText">题目</th>
                    <th data-lang="answer">答案</th>
                    <th data-lang="sort">排序</th>
                    <th data-lang="action">操作</th>
                  </tr>
                </thead>
                <tbody id="questionsTable"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统配置 -->
      <div class="admin-page" id="page-config">
        <h2 data-lang="configTitle">取号配置</h2>
        <div class="card">
          <div class="card-body">
            <div id="configForm"></div>
            <button class="btn btn-primary btn-block mt-16" onclick="saveConfig()" data-lang="save">保存配置</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加/编辑学员弹窗 -->
  <div class="modal-mask" id="studentModal">
    <div class="modal-box">
      <div class="modal-head" id="studentModalTitle" data-lang="addStudent">添加学员</div>
      <div class="modal-content">
        <!-- 头像上传 -->
        <div class="avatar-upload">
          <div class="avatar-preview" id="studentAvatarPreview" onclick="document.getElementById('studentAvatarInput').click()">
            <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
          </div>
          <div class="avatar-upload-btn">
            <button type="button" class="btn btn-outline" onclick="document.getElementById('studentAvatarInput').click()" data-lang="uploadAvatar">上传头像</button>
            <span class="avatar-upload-tip">支持 JPG、PNG 格式，最大 2MB</span>
          </div>
          <input type="file" id="studentAvatarInput" accept="image/*" style="display:none" onchange="previewAvatar(this, 'studentAvatarPreview')">
        </div>
        <input type="hidden" id="studentId">
        <div class="form-group">
          <label class="form-label" data-lang="name">姓名 <span style="color:#ff4d4f">*</span></label>
          <input type="text" class="form-control" id="studentName" placeholder="请输入姓名">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="phoneLast4">手机后4位 <span style="color:#ff4d4f">*</span></label>
          <input type="text" class="form-control" id="studentPhoneLast4" maxlength="4" placeholder="请输入手机号后4位">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="fullPhone">完整手机号</label>
          <input type="text" class="form-control" id="studentFullPhone" maxlength="11" placeholder="请输入完整手机号">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="coach">教练</label>
          <select class="form-control" id="studentCoach">
            <option value="" data-lang="noCoach">不指定教练</option>
          </select>
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn btn-outline" onclick="closeStudentModal()" data-lang="cancel">取消</button>
        <button class="btn btn-primary" onclick="saveStudent()" data-lang="confirm">确定</button>
      </div>
    </div>
  </div>

  <!-- 添加/编辑教练弹窗 -->
  <div class="modal-mask" id="coachModal">
    <div class="modal-box">
      <div class="modal-head" id="coachModalTitle" data-lang="addCoach">添加教练</div>
      <div class="modal-content">
        <!-- 头像上传 -->
        <div class="avatar-upload">
          <div class="avatar-preview" id="coachAvatarPreview" onclick="document.getElementById('coachAvatarInput').click()">
            <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
          </div>
          <div class="avatar-upload-btn">
            <button type="button" class="btn btn-outline" onclick="document.getElementById('coachAvatarInput').click()" data-lang="uploadAvatar">上传头像</button>
            <span class="avatar-upload-tip">支持 JPG、PNG 格式，最大 2MB</span>
          </div>
          <input type="file" id="coachAvatarInput" accept="image/*" style="display:none" onchange="previewAvatar(this, 'coachAvatarPreview')">
        </div>
        <input type="hidden" id="coachId">
        <div class="form-group">
          <label class="form-label" data-lang="username">用户名 <span style="color:#ff4d4f">*</span></label>
          <input type="text" class="form-control" id="coachUsername" placeholder="请输入用户名">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="name">姓名 <span style="color:#ff4d4f">*</span></label>
          <input type="text" class="form-control" id="coachNameInput" placeholder="请输入姓名">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="phone">手机号</label>
          <input type="text" class="form-control" id="coachPhone" maxlength="11" placeholder="请输入手机号">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="password">密码 <span id="passwordRequired" style="color:#ff4d4f">*</span></label>
          <input type="password" class="form-control" id="coachPassword" placeholder="请输入密码">
          <span class="text-sm text-muted">编辑时留空表示不修改密码</span>
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn btn-outline" onclick="closeCoachModal()" data-lang="cancel">取消</button>
        <button class="btn btn-primary" onclick="saveCoach()" data-lang="confirm">确定</button>
      </div>
    </div>
  </div>

  <!-- 修改密码弹窗 -->
  <div class="modal-mask" id="passwordModal">
    <div class="modal-box">
      <div class="modal-head" data-lang="changePassword">修改密码</div>
      <div class="modal-content">
        <div class="form-group">
          <label class="form-label" data-lang="oldPassword">原密码</label>
          <input type="password" class="form-control" id="oldPassword" placeholder="请输入原密码">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="newPassword">新密码</label>
          <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码(至少6位)">
        </div>
        <div class="form-group">
          <label class="form-label" data-lang="confirmPassword">确认密码</label>
          <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入新密码">
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn btn-outline" onclick="closePasswordModal()" data-lang="cancel">取消</button>
        <button class="btn btn-primary" onclick="changePassword()" data-lang="confirm">确定</button>
      </div>
    </div>
  </div>

  <div class="toast-box" id="toastBox"></div>

  <script src="/static/js/icons.js"></script>
  <script src="/static/js/i18n.js"></script>
  <script src="/static/js/admin.js"></script>
</body>
</html>
