{% 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 completed">2</div>
        <div class="progress-line"></div>
        <div class="progress-step completed">3</div>
        <div class="progress-line"></div>
        <div class="progress-step completed">4</div>
        <div class="progress-line"></div>
        <div class="progress-step active">5</div>
    </div>
    
    <h2>5단계: 간증문 입력</h2>
    
    <form id="step5Form" class="form-container">
        <div class="form-group">
            <label for="testimony">간증문 *</label>
            <p class="help-text">이단에서 탈퇴하고 정통 기독교로 돌아온 과정과 소감을 자유롭게 작성해주세요.</p>
            <textarea id="testimony" name="content" rows="15" required placeholder="간증문을 작성해주세요..."></textarea>
        </div>
        
        <div class="form-actions">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='/step4'">이전</button>
            <button type="submit" class="btn btn-primary">제출하기</button>
        </div>
    </form>
</div>

<div id="loadingModal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="spinner"></div>
        <p>문서를 생성하고 업로드하는 중입니다...</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('step5Form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    // 로딩 모달 표시
    document.getElementById('loadingModal').style.display = 'flex';
    
    try {
        const response = await fetch('/step5', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        // 로딩 모달 숨기기
        document.getElementById('loadingModal').style.display = 'none';
        
        if (result.success) {
            alert(result.message);
            window.location.href = '/complete';
        } else {
            alert('오류가 발생했습니다: ' + (result.message || '알 수 없는 오류'));
        }
    } catch (error) {
        document.getElementById('loadingModal').style.display = 'none';
        alert('오류가 발생했습니다: ' + error.message);
    }
});
</script>
{% endblock %}