{% extends "base.html" %}

{% block title %}申请举办杯赛 - 智联青云{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto py-8">
    <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>
        <form method="POST" action="{{ url_for('apply_contest') }}" class="space-y-6">
            <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="例如：2026年星火杯">
            </div>
            <div>
                <label for="organizer" class="block text-sm font-medium text-slate-700 mb-1">主办方 <span class="text-red-500">*</span></label>
                <input type="text" id="organizer" name="organizer" 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="description" class="block text-sm font-medium text-slate-700 mb-1">描述 <span class="text-red-500">*</span></label>
                <textarea id="description" name="description" rows="4" 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>
                <label for="contact" class="block text-sm font-medium text-slate-700 mb-1">联系方式 <span class="text-red-500">*</span></label>
                <input type="text" id="contact" name="contact" 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="邮箱或手机号">
                <p class="mt-1 text-xs text-slate-500">用于管理员与您联系，不会公开显示</p>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-slate-700 mb-1">开始日期 <span class="text-red-500">*</span></label>
                    <input type="date" id="start_date" name="start_date" 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">
                </div>
                <div>
                    <label for="end_date" class="block text-sm font-medium text-slate-700 mb-1">结束日期 <span class="text-red-500">*</span></label>
                    <input type="date" id="end_date" name="end_date" 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">
                </div>
            </div>
            <div>
                <label for="total_score" class="block text-sm font-medium text-slate-700 mb-1">杯赛满分 <span class="text-red-500">*</span></label>
                <input type="number" id="total_score" name="total_score" required min="1" value="150"
                       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="例如：150">
                <p class="mt-1 text-xs text-slate-500">杯赛考试的默认满分分数</p>
            </div>
            <!-- 报备信息 -->
            <div class="border-t border-slate-200 pt-6 mt-2">
                <h2 class="text-lg font-semibold text-slate-900 mb-4">报备信息</h2>
                <div class="space-y-4">
                    <div>
                        <label for="responsible_person" class="block text-sm font-medium text-slate-700 mb-1">责任人姓名 <span class="text-red-500">*</span></label>
                        <input type="text" id="responsible_person" name="responsible_person" 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="responsible_phone" class="block text-sm font-medium text-slate-700 mb-1">责任人电话 <span class="text-red-500">*</span></label>
                        <input type="tel" id="responsible_phone" name="responsible_phone" required
                               pattern="1[3-9]\d{9}"
                               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="11位手机号码">
                        <p class="mt-1 text-xs text-slate-500">请填写有效的手机号码，审核通过后将公开展示</p>
                    </div>
                    <div>
                        <label for="responsible_email" class="block text-sm font-medium text-slate-700 mb-1">责任人邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" id="responsible_email" name="responsible_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="example@email.com">
                    </div>
                    <div>
                        <label for="organization" class="block text-sm font-medium text-slate-700 mb-1">所属机构/学校 <span class="text-red-500">*</span></label>
                        <input type="text" id="organization" name="organization" 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="例如：XX大学、XX教育机构">
                    </div>
                </div>
                <p class="mt-3 text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-md p-3">以上报备信息将在杯赛详情页公开展示，请确保信息真实有效。</p>
            </div>
            <div class="flex justify-end gap-3">
                <a href="{{ url_for('contest_list') }}" 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" id="submit-btn"
                        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>
document.querySelector('form').addEventListener('submit', function() {
    const btn = document.getElementById('submit-btn');
    btn.disabled = true;
    btn.textContent = '提交中...';
    btn.classList.add('opacity-50', 'cursor-not-allowed');
});
</script>
{% endblock %}