{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Level" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" id="menu-button" style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: transparent; border: 2px solid rgba(255,255,255,0.2); color: var(--text-muted); font-size: 1.4rem; text-decoration: none;">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 500px; margin: 0 auto; position: relative; padding-top: 1.25rem;">
        {% include 'main/_subheader.html' with title=_("LEVEL") back="/personal/" %}

        <!-- Tab switcher -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 0.4rem; margin-bottom: 1.5rem;">
            <button id="tab-current" type="button" onclick="showLevelTab('current')"
                    style="padding: 0.75rem; border: none; background: transparent; color: var(--text-main); font-weight: 700; cursor: pointer; border-bottom: 2px solid #3b82f6; border-radius: 0;">{% trans "Current" %}</button>
            <button id="tab-description" type="button" onclick="showLevelTab('description')"
                    style="padding: 0.75rem; border: none; background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 0;">{% trans "Level Description" %}</button>
        </div>

        <!-- ===== Current tab ===== -->
        <div id="panel-current">
            <!-- Current level card -->
            <div style="position: relative; overflow: hidden; padding: 2rem 1.5rem; border-radius: 16px; background: linear-gradient(135deg, #1e3a5f, #15273f); border: 1px solid rgba(59,130,246,0.2); margin-bottom: 1.25rem; min-height: 130px; display: grid; place-items: center; text-align: center;">
                <span aria-hidden="true" style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 5.5rem; font-weight: 900; color: rgba(255,255,255,0.06); letter-spacing: 0.05em;">{{ current_level.code }}</span>
                <div style="position: relative; z-index: 1;">
                    <div style="color: #ffffff; font-size: 1.6rem; font-weight: 800;">{{ current_level.icon }} {{ current_level.name }}</div>
                    <div style="color: rgba(255,255,255,0.78); font-size: 0.95rem; margin-top: 0.25rem;">{% trans "Current Level" %}</div>
                    <div style="color: rgba(255,255,255,0.78); font-size: 0.85rem; margin-top: 0.4rem;">{% trans "Total deposits" %}: {{ total_deposits }}</div>
                    {% if next_level %}
                    <div style="color: rgba(255,255,255,0.78); font-size: 0.85rem; margin-top: 0.4rem;">{% trans "Deposit to reach" %} {{ next_level.code }}: €{{ next_level.min_deposit }}</div>
                    {% else %}
                    <div style="color: rgba(255,255,255,0.78); font-size: 0.85rem; margin-top: 0.4rem;">{% trans "You have reached the highest level." %}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Credibility card -->
            <div style="padding: 1.5rem; border-radius: 16px; background: linear-gradient(135deg, #1e3a5f, #15273f); border: 1px solid rgba(59,130,246,0.2); margin-bottom: 1.75rem; text-align: center;">
                <div style="position: relative; display: inline-grid; place-items: center; margin-bottom: 1rem;">
                    <span style="font-size: 3.5rem; line-height: 1;">🏅</span>
                    <div style="position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); color: #7c2d12; font-weight: 900; font-size: 1.1rem;">100</div>
                    <div style="position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); color: #7c2d12; font-weight: 700; font-size: 0.5rem;">{% trans "Creditbility" %}</div>
                </div>
                <div style="height: 10px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden;">
                    <div style="height: 100%; width: 100%; background: linear-gradient(90deg, #f97316, #fb923c);"></div>
                </div>
            </div>

            <!-- Introduce -->
            <h3 style="margin: 0 0 1rem; text-align: center; color: #f97316; font-size: 1.2rem;">{% trans "Introduce" %}</h3>
            <p style="margin: 0 0 0.5rem; color: var(--text-main); font-weight: 600; font-size: 0.95rem;">{% trans "What is VIP Level?" %}</p>
            <p style="margin: 0 0 2rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7;">The VIP level allows all members to gain more experience completing tasks and earn higher commissions. There are three type of VIP level : VIP, VVIP and SVIP. Each level affects the commission rate. Start with VIP, which has the lowest commission rate, and follow VVIP and then SVIP. SVIP has the highest commission rate and is the top level of all levels. Each account VIP level is automatically upgraded by the system when a certain deposit amount and account balance are reached. Each account starts as a VIP and is upgraded accordingly when a certain deposit amount and account balance are reached.</p>

            <!-- Reputation -->
            <h3 style="margin: 0 0 1rem; text-align: center; color: #f97316; font-size: 1.2rem;">{% trans "Reputation score description" %}</h3>
            <p style="margin: 0 0 0.5rem; color: var(--text-main); font-weight: 600; font-size: 0.95rem;">{% trans "What is Reputation Score?" %}</p>
            <p style="margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7;">Every account has a reputation score system. The reputation score is determined by the performance of each member. Completing daily tasks keeps the reputation score high, but if tasks are not completed, it will affect the score. When the reputation score is below 80%, the system will disable withdrawal. To solve this problem, the member needs to complete tasks or make a deposit to increase the reputation score.</p>
        </div>

        <!-- ===== Level Description tab ===== -->
        <div id="panel-description" style="display: none;">
            <p style="margin: 0 0 1rem; color: var(--text-main); font-weight: 700; font-size: 0.9rem;">{% trans "Level Description" %}</p>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
                {% for row in level_rows %}
                <div style="padding: 1rem 0.5rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid {% if row.is_current %}#3b82f6{% else %}rgba(255,255,255,0.06){% endif %}; text-align: center;">
                    <div style="color: var(--text-main); font-weight: 800; font-size: 1rem;">{{ row.name }}{% if row.is_current %} ✓{% endif %}</div>
                    <div style="color: #3b82f6; font-size: 0.9rem; margin: 0.25rem 0 0.75rem;">{{ row.price }}</div>
                    <div style="font-size: 2.5rem; line-height: 1;">{{ row.icon }}</div>
                    <div style="color: var(--text-main); font-weight: 700; font-size: 0.78rem; margin-top: 0.75rem;">{% trans "Commission Rate :" %}<br/>{{ row.commission }}</div>
                    <div style="color: var(--text-muted); font-weight: 600; font-size: 0.72rem; margin-top: 0.4rem;">{% trans "Daily Ticketing" %}:{{ row.daily_ticketing }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        function showLevelTab(tab) {
            var isCurrent = tab === 'current';
            document.getElementById('panel-current').style.display = isCurrent ? 'block' : 'none';
            document.getElementById('panel-description').style.display = isCurrent ? 'none' : 'block';

            var tabCurrent = document.getElementById('tab-current');
            var tabDescription = document.getElementById('tab-description');
            tabCurrent.style.color = isCurrent ? 'var(--text-main)' : 'var(--text-muted)';
            tabCurrent.style.borderBottomColor = isCurrent ? '#3b82f6' : 'transparent';
            tabDescription.style.color = isCurrent ? 'var(--text-muted)' : 'var(--text-main)';
            tabDescription.style.borderBottomColor = isCurrent ? 'transparent' : '#3b82f6';
        }
    </script>
{% endblock %}