<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>教练工作台 - 驾考灯光模拟</title>
  <link rel="stylesheet" href="/static/css/main.css">
  <style>
    .coach-login-bg {
      min-height: 100vh; min-height: 100dvh;
      display: flex; align-items: center; justify-content: center;
      background: #f0f2f5;
    }
    .coach-login-card {
      width: 90%; max-width: 340px;
      background: #fff;
      border-radius: 16px;
      padding: 32px 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      text-align: center;
      animation: slideUp 0.5s ease;
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .coach-avatar {
      width: 56px; height: 56px;
      background: linear-gradient(135deg, #52c41a, #389e0d);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      overflow: hidden;
    }
    .coach-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .coach-avatar svg { width: 28px; height: 28px; fill: #fff; }
    
    /* 学员头像样式 */
    .student-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #52c41a;
    }
    .student-avatar-placeholder {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #52c41a, #389e0d);
      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="coach-login-bg">
      <div class="coach-login-card">
        <div class="coach-avatar" id="loginAvatar">
          <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>
        <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;" data-lang="coachLogin">教练工作台</h2>
        <p style="font-size:13px;color:#8c8c8c;margin-bottom:24px;" data-lang="coachLoginDesc">请登录您的教练账号</p>
        <div class="form-group" style="text-align:left;">
          <label class="form-label" data-lang="username">用户名</label>
          <input type="text" class="form-control" id="coachUser" 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="coachPass" data-lang-placeholder="password" placeholder="请输入密码">
        </div>
        <button class="btn btn-success btn-lg btn-block" onclick="coachLogin()" style="margin-top:8px;" 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="coachMain" style="display:none;">
    <!-- 水印 -->
    <div class="watermark-layer" id="coachWatermark" data-text=""></div>

    <header class="app-header" style="background:linear-gradient(135deg, #52c41a, #389e0d);">
      <div class="header-left">
        <div class="coach-avatar" id="headerAvatar" style="width:32px;height:32px;margin:0;">
          <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>
        <span class="header-title" data-lang="coachLogin">教练工作台</span>
      </div>
      <div class="header-right">
        <span class="header-user" id="coachName"></span>
        <button class="lang-btn" onclick="showChangePassword()" data-lang="changePassword">修改密码</button>
        <button class="lang-btn" onclick="coachLogout()" data-lang="logout">退出</button>
      </div>
    </header>

    <div class="page-body" style="padding-bottom:24px;">
      <!-- 统计 -->
      <div class="stat-row">
        <div class="stat-box">
          <div class="stat-num" id="sTotal">0</div>
          <div class="stat-label" data-lang="todayStudents">今日学员</div>
        </div>
        <div class="stat-box">
          <div class="stat-num" id="sDriving" style="color:#52c41a;">0</div>
          <div class="stat-label" data-lang="nowDriving">练车中</div>
        </div>
        <div class="stat-box">
          <div class="stat-num" id="sDone" style="color:#722ed1;">0</div>
          <div class="stat-label" data-lang="todayDone">已完成</div>
        </div>
        <div class="stat-box">
          <div class="stat-num" id="sWait" style="color:#fa8c16;">0</div>
          <div class="stat-label" data-lang="waitingCount">等待中</div>
        </div>
      </div>

      <!-- 当前练车 -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <span class="icon icon-sm" style="color:#52c41a;"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99z"/></svg></span>
            <span data-lang="currentStatus">当前状态</span>
          </div>
        </div>
        <div class="card-body" id="currentStatus">
          <div class="empty-state"><p class="text-muted" data-lang="noDriving">暂无学员练车</p></div>
        </div>
      </div>

      <!-- 学员列表 -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <span class="icon icon-sm"><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="todayStudents">今日学员</span>
          </div>
          <div class="flex gap-8">
            <button class="btn btn-sm btn-outline" onclick="filterStudents('all')" data-lang="all">全部</button>
            <button class="btn btn-sm btn-outline" onclick="filterStudents('waiting')" data-lang="waiting">等待</button>
            <button class="btn btn-sm btn-outline" onclick="filterStudents('completed')" data-lang="completed">完成</button>
          </div>
        </div>
        <div class="card-body" style="padding:0;">
          <div style="padding:10px 16px;">
            <input type="text" class="form-control" id="searchInput" data-lang-placeholder="search" placeholder="搜索姓名或手机号..." oninput="renderStudentList()">
          </div>
          <ul class="queue-list" id="studentList"></ul>
        </div>
      </div>

      <!-- 名下学生 -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <span class="icon icon-sm"><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="myStudents">名下学员</span>
          </div>
        </div>
        <div class="card-body" id="myStudentsArea">
          <div class="empty-state"><p class="text-muted" data-lang="noStudents">暂无学员</p></div>
        </div>
      </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/coach.js"></script>
</body>
</html>
