{% extends "exam/base.html" %}
{% block title %}登录 - 安全培训考试{% endblock %}
{% block content %}
<style>
.login-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
}
.login-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    background: #f5f5f5;
    border: none;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
}
.login-tab.active {
    background: #4a90d9;
    color: #fff;
    font-weight: bold;
}
.login-tab:hover:not(.active) {
    background: #e3f2fd;
}
.login-panel {
    display: none;
}
.login-panel.active {
    display: block;
}
</style>

<div class="header">
    <h1>🔐 登录</h1>
    <div class="sub">安全培训考试系统</div>
</div>
<div class="container">
    <div class="card" style="max-width:420px; margin:30px auto;">

        <div class="login-tabs">
            <div class="login-tab active" onclick="switchTab('student')" id="tab-student">👤 考生登录</div>
            <div class="login-tab" onclick="switchTab('admin')" id="tab-admin">🔐 管理员登录</div>
        </div>

        <!-- 考生登录 -->
        <div class="login-panel active" id="panel-student">
            <form id="studentForm">
                <div class="form-group">
                    <label>姓名 <span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="student-name" 
                           placeholder="请输入您的真实姓名" required>
                </div>
                <div class="form-group">
                    <label>手机号（选填）</label>
                    <input type="tel" class="form-control" id="student-phone" 
                           placeholder="用于成绩查询">
                </div>
                <button type="submit" class="btn btn-primary btn-block">进入考试系统</button>
            </form>
            <p style="text-align:center; margin-top:12px; font-size:12px; color:#999;">
                微信内访问可自动获取微信头像与昵称
            </p>
        </div>

        <!-- 管理员登录 -->
        <div class="login-panel" id="panel-admin">
            <form id="adminForm">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" id="admin-username" 
                           placeholder="请输入管理员用户名" required value="admin">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" id="admin-password" 
                           placeholder="请输入管理员密码" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block" style="background:#d9534f;">管理员登录</button>
            </form>
        </div>

        <div id="result" style="display:none; margin-top:16px;">
            <div id="resultContent" style="padding:12px; border-radius:4px;"></div>
        </div>

    </div>
</div>

<script>
function switchTab(type) {
    document.querySelectorAll('.login-tab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.login-panel').forEach(function(p) { p.classList.remove('active'); });

    document.getElementById('tab-' + type).classList.add('active');
    document.getElementById('panel-' + type).classList.add('active');
}

// 考生登录
document.getElementById('studentForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var name = document.getElementById('student-name').value.trim();
    var phone = document.getElementById('student-phone').value.trim();
    if(!name) { alert('请输入姓名'); return; }

    fetch('/manual-login/', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'name=' + encodeURIComponent(name) + '&phone=' + encodeURIComponent(phone)
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if(data.status === 'ok') {
            window.location.href = data.redirect;
        } else {
            showError(data.msg);
        }
    })
    .catch(function(err) {
        showError('登录请求失败');
    });
});

// 管理员登录
document.getElementById('adminForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var username = document.getElementById('admin-username').value.trim();
    var password = document.getElementById('admin-password').value.trim();

    var btn = e.target.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.textContent = '登录中...';

    fetch('/admin-login-api/', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if(data.status === 'ok') {
            window.location.href = data.redirect;
        } else {
            showError(data.msg);
        }
    })
    .catch(function(err) {
        showError('登录请求失败');
    })
    .finally(function() {
        btn.disabled = false;
        btn.textContent = '管理员登录';
    });
});

function showError(msg) {
    var result = document.getElementById('result');
    var resultContent = document.getElementById('resultContent');
    result.style.display = 'block';
    resultContent.style.background = '#ffebee';
    resultContent.style.color = '#c62828';
    resultContent.innerHTML = '<strong>❌ ' + msg + '</strong>';
}
</script>
{% endblock %}