{% extends "base.html" %}

{% block title %}申请成为杯赛老师 - 智联青云{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto py-8">
    <!-- 邀请码激活区域 -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold text-blue-800 mb-2">🎫 已有邀请码？在此激活</h2>
        <p class="text-sm text-blue-600 mb-4">审核通过后，您会在私聊消息中收到邀请码。输入邀请码即可正式成为杯赛老师。</p>
        <div class="flex gap-3">
            <input type="text" id="invite_code" placeholder="请输入邀请码，如 TC-A3K9M2X7"
                   class="flex-1 px-3 py-2 border border-blue-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm uppercase"
                   maxlength="11">
            <button type="button" id="activate_btn" onclick="activateInviteCode()"
                    class="px-5 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                激活
            </button>
        </div>
        <p id="invite_result" class="text-sm mt-2 hidden"></p>
    </div>

    <div class="bg-white shadow-sm rounded-lg border border-slate-200 p-6">
        <h1 class="text-2xl font-bold text-slate-900 mb-6">申请成为杯赛老师</h1>
        <p class="text-sm text-slate-500 mb-6">请选择您希望担任老师的杯赛，并填写申请理由。</p>
        <form method="POST" action="{{ url_for('apply_teacher') }}" class="space-y-6">
            <div>
                <label for="contest_id" class="block text-sm font-medium text-slate-700 mb-1">选择杯赛 <span class="text-red-500">*</span></label>
                <select id="contest_id" name="contest_id" required
                        class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                    <option value="">请选择杯赛</option>
                    {% for contest in contests %}
                    <option value="{{ contest.id }}" {% if selected_contest and selected_contest.id == contest.id %}selected{% endif %}>{{ contest.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="name" class="block text-sm font-medium text-slate-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                <input type="text" id="name" name="name" required
                       class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                       placeholder="您的真实姓名">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                <input type="email" id="email" name="email" required
                       class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                       placeholder="用于接收审核结果通知">
            </div>
            <div>
                <label for="reason" class="block text-sm font-medium text-slate-700 mb-1">申请理由 <span class="text-red-500">*</span></label>
                <textarea id="reason" name="reason" rows="5" required
                          class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                          placeholder="请简要说明您的教学经历或申请原因"></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <a href="{{ url_for('home') }}" class="px-5 py-2.5 border border-slate-300 rounded-md text-sm font-medium text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    取消
                </a>
                <button type="submit"
                        class="px-5 py-2.5 bg-primary text-white rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    提交申请
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function activateInviteCode() {
    const code = document.getElementById('invite_code').value.trim();
    const resultEl = document.getElementById('invite_result');
    const btn = document.getElementById('activate_btn');
    if (!code) {
        resultEl.textContent = '请输入邀请码';
        resultEl.className = 'text-sm mt-2 text-red-600';
        return;
    }
    btn.disabled = true;
    btn.textContent = '激活中...';
    fetch('/api/activate-invite-code', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({code: code})
    })
    .then(r => r.json())
    .then(data => {
        resultEl.classList.remove('hidden');
        if (data.success) {
            resultEl.textContent = data.message;
            resultEl.className = 'text-sm mt-2 text-green-600 font-medium';
            setTimeout(() => location.reload(), 1500);
        } else {
            resultEl.textContent = data.message;
            resultEl.className = 'text-sm mt-2 text-red-600';
        }
    })
    .catch(() => {
        resultEl.classList.remove('hidden');
        resultEl.textContent = '网络错误，请稍后重试';
        resultEl.className = 'text-sm mt-2 text-red-600';
    })
    .finally(() => {
        btn.disabled = false;
        btn.textContent = '激活';
    });
}
</script>
{% endblock %}