{% extends "base.html" %}

{% block content %}
<div class="step-container">
    <div class="progress-bar">
        <div class="progress-step completed">1</div>
        <div class="progress-line"></div>
        <div class="progress-step active">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>2단계: 기독교대한감리회 신앙고백 교리 점검</h2>
    
    <form id="step2Form" class="form-container">
        <div class="doctrine-section">
            <div class="form-group">
                <label>1. 우주 만물을 창조하시고 섭리하시며 주관하시는 거룩하시고 자비하시며 오직 한 분이신 아버지 하나님을 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q1_father_god" value="예" required> 예</label>
                    <label><input type="radio" name="q1_father_god" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q1_father_god" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>2. 말씀이 육신이 되어 우리 가운데 오셔서 하나님의 나라를 선포하시고 십자가에 달려 죽으셨다가 부활승천 하심으로 대속자가 되시고 구세주가 되시는 예수 그리스도를 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q2_jesus_christ" value="예" required> 예</label>
                    <label><input type="radio" name="q2_jesus_christ" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q2_jesus_christ" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>3. 우리와 함께 계셔서 우리를 거듭나게 하시고 거룩하게 하시며 완전하게 하시며 위안과 힘이 되시는 성령을 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q3_holy_spirit" value="예" required> 예</label>
                    <label><input type="radio" name="q3_holy_spirit" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q3_holy_spirit" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>4. 성령의 감동으로 기록된 하나님의 말씀인 성경이 구원에 이르는 도리와 신앙생활에 충분한 표준이 됨을 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q4_bible" value="예" required> 예</label>
                    <label><input type="radio" name="q4_bible" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q4_bible" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>5. 하나님의 은혜로 믿음을 통해 죄사함을 받아 거룩해지며 하나님의 구원의 역사에 동참하도록 부름받음을 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q5_salvation" value="예" required> 예</label>
                    <label><input type="radio" name="q5_salvation" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q5_salvation" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>6. 예배와 친교, 교육과 봉사, 전도와 선교를 위해 하나가 된 그리스도의 몸인 교회를 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q6_church" value="예" required> 예</label>
                    <label><input type="radio" name="q6_church" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q6_church" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>7. 만민에게 복음을 전파함으로 하나님의 정의와 사랑을 나누고 평화의 세계를 이루는 모든 사람들이 하나님 앞에 형제됨을 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q7_mission" value="예" required> 예</label>
                    <label><input type="radio" name="q7_mission" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q7_mission" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="doctrine-section">
            <div class="form-group">
                <label>8. 예수 그리스도의 재림과 심판 우리 몸의 부활과 영생 그리고 의의 최후 승리와 영원한 하나님 나라를 믿습니까?</label>
                <div class="radio-group">
                    <label><input type="radio" name="q8_second_coming" value="예" required> 예</label>
                    <label><input type="radio" name="q8_second_coming" value="아니오"> 아니오</label>
                    <label><input type="radio" name="q8_second_coming" value="모르겠습니다"> 모르겠습니다</label>
                </div>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='/step1'">이전</button>
            <button type="submit" class="btn btn-primary">다음 단계</button>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('step2Form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch('/step2', {
            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 %}