{% extends 'events/base.html' %}

{% block title %}申し込み確認 - ビジネス交流会{% endblock %}

{% block extra_css %}
<style>
    .confirm-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .confirm-section h5 {
        color: #003366;
        font-weight: 700;
        margin-bottom: 15px;
        border-bottom: 2px solid #0066cc;
        padding-bottom: 10px;
    }
    
    .confirm-item {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 20px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }
    
    .confirm-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .confirm-label {
        font-weight: 600;
        color: #333;
    }
    
    .confirm-value {
        color: #666;
        word-break: break-word;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- イベント情報 -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">申し込むイベント</h5>
            </div>
            <div class="card-body">
                <h6>{{ event.event_name }}</h6>
                <p class="mb-1"><strong>開催日：</strong> {{ event.event_date|date:"Y年m月d日 H:i" }}</p>
                <p class="mb-0"><strong>開催場所：</strong> {{ event.event_venue }}</p>
                <p class="text-muted mt-2 mb-0">
                    <strong>申込受付期間：</strong> 
                    {{ event.registration_start_date|date:"Y年m月d日" }} 
                    〜 
                    {{ event.registration_end_date|date:"Y年m月d日" }}
                </p>
            </div>
        </div>
        
        <!-- 入力内容確認 -->
        <div class="alert alert-info mb-4">
            <h5 class="alert-heading">確認してください</h5>
            <p class="mb-0">
                以下の内容に間違いないか、ご確認ください。<br>
                修正が必要な場合は「戻る」ボタンをクリックしてください。
            </p>
        </div>
        
        <!-- 企業情報 -->
        <div class="confirm-section">
            <h5>企業情報</h5>
            
            <div class="confirm-item">
                <div class="confirm-label">会社名</div>
                <div class="confirm-value">{{ member_data.company_name }}</div>
            </div>
            
            {% if member_data.company_name_kana %}
            <div class="confirm-item">
                <div class="confirm-label">会社名ふりがな</div>
                <div class="confirm-value">{{ member_data.company_name_kana }}</div>
            </div>
            {% endif %}
            
            {% if member_data.department %}
            <div class="confirm-item">
                <div class="confirm-label">部署名</div>
                <div class="confirm-value">{{ member_data.department }}</div>
            </div>
            {% endif %}
            
            {% if member_data.position %}
            <div class="confirm-item">
                <div class="confirm-label">役職名</div>
                <div class="confirm-value">{{ member_data.position }}</div>
            </div>
            {% endif %}
        </div>
        
        <!-- 個人情報 -->
        <div class="confirm-section">
            <h5>個人情報</h5>
            
            <div class="confirm-item">
                <div class="confirm-label">氏名</div>
                <div class="confirm-value">{{ member_data.full_name }}</div>
            </div>
            
            <div class="confirm-item">
                <div class="confirm-label">メールアドレス</div>
                <div class="confirm-value">{{ member_data.email }}</div>
            </div>
            
            {% if member_data.phone_number %}
            <div class="confirm-item">
                <div class="confirm-label">電話番号</div>
                <div class="confirm-value">{{ member_data.phone_number }}</div>
            </div>
            {% endif %}
            
            {% if member_data.occupation %}
            <div class="confirm-item">
                <div class="confirm-label">職種</div>
                <div class="confirm-value">{{ member_data.occupation }}</div>
            </div>
            {% endif %}
        </div>
        
        <!-- その他情報 -->
        {% if member_data.questionnaire_response or member_data.free_comment %}
        <div class="confirm-section">
            <h5>その他</h5>
            
            {% if member_data.questionnaire_response %}
            <div class="confirm-item">
                <div class="confirm-label">アンケート回答</div>
                <div class="confirm-value">{{ member_data.questionnaire_response|linebreaks }}</div>
            </div>
            {% endif %}
            
            {% if member_data.free_comment %}
            <div class="confirm-item">
                <div class="confirm-label">自由記入欄</div>
                <div class="confirm-value">{{ member_data.free_comment|linebreaks }}</div>
            </div>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- 同意事項 -->
        <div class="confirm-section">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" disabled checked>
                <label class="form-check-label">
                    プライバシーポリシーに同意します
                </label>
            </div>
        </div>
        
        <!-- ボタン -->
        <form method="post">
            {% csrf_token %}
            
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-between mb-4">
                <button type="submit" name="action" value="edit" class="btn btn-outline-secondary">
                    修正する
                </button>
                <button type="submit" name="action" value="confirm" class="btn btn-accent btn-lg">
                    申し込み完了
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}