{% extends "base.html" %}

{% block content %}
<div class="step-container">
    <div class="progress-bar">
        <div class="progress-step active">1</div>
        <div class="progress-line"></div>
        <div class="progress-step">2</div>
        <div class="progress-line"></div>
        <div class="progress-step">3</div>
        <div class="progress-line"></div>
        <div class="progress-step">4</div>
        <div class="progress-line"></div>
        <div class="progress-step">5</div>
    </div>
    
    <h2>1단계: 기본 정보 입력</h2>
    
    <form id="step1Form" class="form-container">
        <div class="form-group">
            <label for="name">이름 *</label>
            <input type="text" id="name" name="name" value="{{ basic_info.get('name', '') }}" required>
        </div>
        
        <div class="form-group">
            <label for="district">교구 *</label>
            <select id="district" name="district" required>
                <option value="">선택하세요</option>
                {% for district in districts %}
                <option value="{{ district }}" {% if basic_info.get('district') == district %}selected{% endif %}>{{ district }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div class="form-group">
            <label for="cult">이단교단 *</label>
            <select id="cult" name="cult" required>
                <option value="">선택하세요</option>
                {% for cult in cults %}
                <option value="{{ cult }}" {% if basic_info.get('cult') == cult %}selected{% endif %}>{{ cult }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div class="form-group" id="cultOtherGroup" style="display: none;">
            <label for="cult_other">이단교단 직접 입력 *</label>
            <input type="text" id="cult_other" name="cult_other" value="{{ basic_info.get('cult_other', '') }}" placeholder="이단교단명을 입력해주세요">
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">다음 단계</button>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
// 이단교단 선택에 따라 직접 입력 필드 표시/숨김
document.getElementById('cult').addEventListener('change', function() {
    const cultOtherGroup = document.getElementById('cultOtherGroup');
    const cultOtherInput = document.getElementById('cult_other');
    
    if (this.value === '기타 (위 선택지에 없을 경우)') {
        cultOtherGroup.style.display = 'block';
        cultOtherInput.required = true;
    } else {
        cultOtherGroup.style.display = 'none';
        cultOtherInput.required = false;
        cultOtherInput.value = '';
    }
});

// 페이지 로드 시 초기 상태 설정
document.addEventListener('DOMContentLoaded', function() {
    const cultSelect = document.getElementById('cult');
    if (cultSelect.value === '기타 (위 선택지에 없을 경우)') {
        document.getElementById('cultOtherGroup').style.display = 'block';
        document.getElementById('cult_other').required = true;
    }
});

document.getElementById('step1Form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // '기타' 선택 시 직접 입력 필드 검증
    const cultSelect = document.getElementById('cult');
    const cultOtherInput = document.getElementById('cult_other');
    
    if (cultSelect.value === '기타 (위 선택지에 없을 경우)') {
        if (!cultOtherInput.value.trim()) {
            alert('이단교단명을 직접 입력해주세요.');
            cultOtherInput.focus();
            return;
        }
    }
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch('/step1', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        if (result.success) {
            window.location.href = result.next_step;
        } else {
            alert('오류가 발생했습니다: ' + (result.message || '알 수 없는 오류'));
        }
    } catch (error) {
        alert('오류가 발생했습니다: ' + error.message);
    }
});
</script>
{% endblock %}