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

{% block title %}申し込み完了 - Sovereign Events{% endblock %}

{% block content %}
<!-- Top Navigation -->
<nav class="fixed top-0 w-full z-40 shadow-sm flex justify-between items-center px-12 py-4 bg-white">
    <a href="{% url 'events:lp_main' event.event_id %}" class="text-xl font-black text-[#0C3260]">Sovereign Events</a>
    <div class="text-[#0C3260]">Complete</div>
</nav>

<!-- Progress Indicator -->
<div class="bg-[#f5f5f5] px-12 py-8 flex justify-center items-center gap-8 mt-20">
    <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center font-bold">✓</div>
        <span class="text-xs font-bold mt-2 text-green-500">Form</span>
    </div>
    <div class="flex-1 h-1 bg-green-500"></div>
    <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center font-bold">✓</div>
        <span class="text-xs font-bold mt-2 text-green-500">Confirm</span>
    </div>
    <div class="flex-1 h-1 bg-green-500"></div>
    <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-[#E1B64A] text-[#0C3260] flex items-center justify-center font-bold">3</div>
        <span class="text-xs font-bold mt-2 text-[#0C3260]">Complete</span>
    </div>
</div>

<!-- Main Content -->
<section class="py-12 px-12 max-w-4xl mx-auto">
    <!-- Thank You Section -->
    <div class="text-center mb-16 py-12 px-8 bg-gradient-to-b from-blue-50 to-transparent rounded-lg">
        <div class="text-6xl mb-6 text-green-500">✓</div>
        <h1 class="text-4xl font-black text-[#0C3260] mb-4">お申し込みありがとうございました</h1>
        <p class="text-lg text-gray-700 leading-relaxed">
            参加申し込みが完了いたしました。<br>
            確認メールを送信いたしましたので、ご確認ください。
        </p>
    </div>

    <!-- Important Notice -->
    <div class="bg-blue-50 border-l-4 border-blue-500 px-6 py-4 mb-12 rounded">
        <h3 class="font-bold text-gray-900 mb-3">重要なお知らせ</h3>
        <ul class="text-sm text-gray-700 space-y-2">
            <li>✓ 確認メールを <span class="font-bold">{{ member.email }}</span> 宛に送信いたしました。</li>
            <li>✓ メールが届かない場合は、迷惑メールフォルダをご確認ください。</li>
            <li>✓ その他ご不明な点がございましたら、お気軽にお問い合わせください。</li>
        </ul>
    </div>

    <!-- Event Information Card -->
    <div class="bg-gradient-to-r from-[#0C3260] to-[#0E4C92] text-white rounded-lg p-8 mb-12">
        <h2 class="text-2xl font-bold mb-4">{{ event.event_name }}</h2>
        <div class="grid grid-cols-3 gap-4 text-sm">
            <div>
                <p class="opacity-70 mb-1">開催日時</p>
                <p class="font-bold">{{ event.event_date|date:"Y.m.d" }}</p>
            </div>
            <div>
                <p class="opacity-70 mb-1">開催場所</p>
                <p class="font-bold">{{ event.event_venue }}</p>
            </div>
            <div>
                <p class="opacity-70 mb-1">会員番号</p>
                <p class="font-bold text-[#E1B64A]">{{ member.member_id }}</p>
            </div>
        </div>
    </div>

    <!-- Registered Information -->
    <div class="bg-white border border-gray-200 rounded-lg p-8 mb-12">
        <h3 class="text-2xl font-bold text-[#0C3260] mb-6 pb-3 border-b-2 border-[#E1B64A]">
            ご登録いただいた情報
        </h3>

        <div class="space-y-4">
            <div class="grid grid-cols-3 gap-4 pb-4 border-b border-gray-200">
                <div>
                    <p class="text-xs font-bold text-gray-500 mb-1">氏名</p>
                    <p class="font-semibold text-gray-900">{{ member.full_name }}</p>
                </div>
                <div>
                    <p class="text-xs font-bold text-gray-500 mb-1">会社名</p>
                    <p class="font-semibold text-gray-900">{{ member.company_name }}</p>
                </div>
                <div>
                    <p class="text-xs font-bold text-gray-500 mb-1">メールアドレス</p>
                    <p class="font-semibold text-gray-900">{{ member.email }}</p>
                </div>
            </div>

            {% if member.phone_number %}
            <div class="grid grid-cols-3 gap-4 pb-4 border-b border-gray-200">
                <div>
                    <p class="text-xs font-bold text-gray-500 mb-1">電話番号</p>
                    <p class="font-semibold text-gray-900">{{ member.phone_number }}</p>
                </div>
            </div>
            {% endif %}

            {% if member.occupation %}
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <p class="text-xs font-bold text-gray-500 mb-1">職種</p>
                    <p class="font-semibold text-gray-900">{{ member.occupation }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex gap-4 justify-center mb-12">
        <a href="{% url 'events:mypage_login' event.event_id %}" class="px-8 py-4 bg-[#0C3260] text-white font-bold rounded-lg hover:bg-[#051f3a] transition-colors">
            マイページにログイン
        </a>
        <a href="{% url 'events:lp_main' event.event_id %}" class="px-8 py-4 border-2 border-[#0C3260] text-[#0C3260] font-bold rounded-lg hover:bg-gray-50 transition-colors">
            トップページに戻る
        </a>
    </div>

    <!-- Important Notice -->
    <div class="bg-yellow-50 border-l-4 border-yellow-400 px-6 py-4 rounded">
        <h3 class="font-bold text-yellow-900 mb-2">ご注意ください</h3>
        <p class="text-sm text-yellow-800">
            登録後にお申し込み情報を修正される場合は、<br>
            マイページからキャンセルしていただき、<br>
            改めてお申し込みください。
        </p>
    </div>
</section>

<!-- Footer -->
<footer class="w-full py-12 bg-[#001b3d] mt-20">
    <div class="px-12 max-w-[1440px] mx-auto text-center text-white/60 font-inter text-sm">
        © 2024 Sovereign Architect. All rights reserved.
    </div>
</footer>
{% endblock %}