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

{% block title %}マイページ - ビジネス交流会{% endblock %}

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

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <!-- ウェルカムセクション -->
        <div class="alert alert-success mb-4">
            <h4 class="alert-heading">ようこそ</h4>
            <p class="mb-0">{{ member.full_name }}さん、マイページへようこそ</p>
        </div>
        
        <!-- イベント情報 -->
        <div class="mypage-section">
            <h4>申し込みイベント</h4>
            
            <div class="info-item">
                <div class="info-label">イベント名</div>
                <div class="info-value">{{ event.event_name }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">開催日</div>
                <div class="info-value">{{ event.event_date|date:"Y年m月d日 H:i" }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">開催場所</div>
                <div class="info-value">{{ event.event_venue }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">住所</div>
                <div class="info-value">{{ event.event_venue_address }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">申込受付期間</div>
                <div class="info-value">
                    {{ event.registration_start_date|date:"Y年m月d日" }} 
                    〜 
                    {{ event.registration_end_date|date:"Y年m月d日" }}
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-label">会員番号</div>
                <div class="info-value">{{ member.member_id }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">申込日時</div>
                <div class="info-value">{{ member.created_at|date:"Y年m月d日 H:i" }}</div>
            </div>
        </div>
        
        <!-- 参加者情報 -->
        <div class="mypage-section">
            <h4>ご登録情報</h4>
            
            <div class="info-item">
                <div class="info-label">氏名</div>
                <div class="info-value">{{ member.full_name }}</div>
            </div>
            
            <div class="info-item">
                <div class="info-label">会社名</div>
                <div class="info-value">{{ member.company_name }}</div>
            </div>
            
            {% if member.company_name_kana %}
            <div class="info-item">
                <div class="info-label">会社名ふりがな</div>
                <div class="info-value">{{ member.company_name_kana }}</div>
            </div>
            {% endif %}
            
            {% if member.department %}
            <div class="info-item">
                <div class="info-label">部署名</div>
                <div class="info-value">{{ member.department }}</div>
            </div>
            {% endif %}
            
            {% if member.position %}
            <div class="info-item">
                <div class="info-label">役職名</div>
                <div class="info-value">{{ member.position }}</div>
            </div>
            {% endif %}
            
            <div class="info-item">
                <div class="info-label">メールアドレス</div>
                <div class="info-value">{{ member.email }}</div>
            </div>
            
            {% if member.phone_number %}
            <div class="info-item">
                <div class="info-label">電話番号</div>
                <div class="info-value">{{ member.phone_number }}</div>
            </div>
            {% endif %}
            
            {% if member.occupation %}
            <div class="info-item">
                <div class="info-label">職種</div>
                <div class="info-value">{{ member.get_occupation_display }}</div>
            </div>
            {% endif %}
        </div>
        
        <!-- アクション -->
        <div class="mypage-section">
            <h4>操作</h4>
            
            <p class="mb-3">参加をキャンセルされたい場合は、以下のボタンをクリックしてください。</p>
            
            <a href="{% url 'events:cancellation_confirm' event.event_id %}" class="btn btn-warning btn-lg">
                参加をキャンセルする
            </a>
        </div>
        
        <!-- サポート -->
        <div class="alert alert-info mb-4">
            <h5 class="alert-heading">ご質問・お問い合わせ</h5>
            <p class="mb-0">
                ご不明な点やご質問がございましたら、<br>
                お気軽にお問い合わせください。
            </p>
        </div>
        
        <!-- ボタン -->
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-4">
            <a href="{% url 'events:lp_main' event.event_id %}" class="btn btn-outline-secondary btn-lg">
                トップページに戻る
            </a>
        </div>
    </div>
</div>
{% endblock %}