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

{% block title %}Wallet - Movie Ticket Ordering{% endblock %}

{% block content %}
    <div class="content-card section-inner">
        {% include 'main/_subheader.html' with title="Wallet" back="/personal/" %}
        <!-- Trial Bonus Card -->
        <div style="padding: 1.5rem; background: var(--bg-elev); border: var(--border-tech); border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 4px 15px var(--primary-glow);">
            <h2 style="margin: 0 0 1.5rem; color: var(--primary); font-size: 1.1rem; font-family: var(--font-mono); text-transform: uppercase; font-weight: 800;">Trial Bonus: {% if welcome_bonus_active %}{{ welcome_bonus }}{% else %}€0.00{% endif %}</h2>
            
            <!-- Stats Grid -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                <!-- Balance -->
                <div style="text-align: center; padding-bottom: 1rem; border-right: 1px dashed rgba(43, 111, 255, 0.2);">
                    <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; font-family: var(--font-mono); font-weight: bold;">Balance</p>
                    <p style="margin: 0; color: var(--primary); font-size: 1.4rem; font-weight: 800;">{{ balance }}</p>
                </div>

                <!-- Number of completed tickets -->
                <div style="text-align: center; padding-bottom: 1rem;">
                    <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; font-family: var(--font-mono); font-weight: bold;">Tickets</p>
                    <p style="margin: 0; color: var(--primary); font-size: 1.4rem; font-weight: 800;">{{ ticketing_count }} / {{ tickets_per_set }}</p>
                    <p style="margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.72rem;">This set</p>
                </div>

                <!-- Earnings -->
                <div style="text-align: center; padding-top: 1rem; border-top: 1px dashed rgba(43, 111, 255, 0.2); border-right: 1px dashed rgba(43, 111, 255, 0.2);">
                    <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; font-family: var(--font-mono); font-weight: bold;">Earnings</p>
                    <p style="margin: 0; color: #10b981; font-size: 1.4rem; font-weight: 800;">{{ earnings }}</p>
                </div>

                <!-- Processing -->
                <div style="text-align: center; padding-top: 1rem; border-top: 1px dashed rgba(43, 111, 255, 0.2);">
                    <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; font-family: var(--font-mono); font-weight: bold;">Processing</p>
                    <p style="margin: 0; color: #f59e0b; font-size: 1.4rem; font-weight: 800;">{{ processing }}</p>
                    <p style="margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.72rem;">{{ processing_count }} ticket{{ processing_count|pluralize }} pending</p>
                </div>
            </div>
        </div>

        <div style="padding: 1rem; background: var(--bg-card); border: var(--border-soft); border-radius: 8px; margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem;">
                <span style="color: var(--text-main); font-weight: 800; font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase;">Ticket Wallet</span>
                <span style="color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">{{ ticketing_count }} / {{ tickets_per_set }}</span>
            </div>
            <div style="height: 8px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; border: var(--border-soft);">
                <div style="height: 100%; width: {% widthratio ticketing_count tickets_per_set 100 %}%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow);"></div>
            </div>
            <p style="margin: 0.6rem 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45;">
                {% if progress.withdraw_locked %}
                    Withdrawal locked: {{ progress.withdraw_lock_reason }}
                {% elif progress.can_withdraw %}
                    Withdrawal unlocked.
                {% elif tickets_set_remaining == 0 %}
                    This set is complete.
                {% else %}
                    {{ tickets_set_remaining }} more ticket{{ tickets_set_remaining|pluralize }} to complete this set.
                {% endif %}
            </p>
        </div>

        <!-- Wallet Options -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
            <button onclick="window.location.href='/deposit/'" class="button primary" style="width: 100%;">Deposit</button>
            <button onclick="window.location.href='/withdrawal/'" class="button secondary" style="width: 100%;">Withdraw</button>
        </div>

        <!-- Transaction History Section -->
        <div style="margin-top: 2rem;">
            <h3 style="margin: 0 0 1rem; color: var(--text-main); font-size: 1rem; font-family: var(--font-mono); text-transform: uppercase;">Recent History</h3>
            
            <!-- Transaction Item 1 -->
            <div style="padding: 1rem; background: var(--bg-elev); border: var(--border-soft); border-radius: 8px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.25);">
                <div>
                    <p style="margin: 0 0 0.25rem; color: var(--text-main); font-weight: 700; font-size: 0.9rem;">Movie Ticket Order</p>
                    <p style="margin: 0; color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">2025-06-08 14:40:03</p>
                </div>
                <p style="margin: 0; color: #34d399; font-weight: 800; font-family: var(--font-mono);">+€2.31</p>
            </div>

            <!-- Transaction Item 2 -->
            <div style="padding: 1rem; background: var(--bg-elev); border: var(--border-soft); border-radius: 8px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.25);">
                <div>
                    <p style="margin: 0 0 0.25rem; color: var(--text-main); font-weight: 700; font-size: 0.9rem;">Withdrawal Request</p>
                    <p style="margin: 0; color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">2025-06-07 10:15:30</p>
                </div>
                <p style="margin: 0; color: #ef4444; font-weight: 800; font-family: var(--font-mono);">-€50.00</p>
            </div>

            <!-- Transaction Item 3 -->
            <div style="padding: 1rem; background: var(--bg-elev); border: var(--border-soft); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.25);">
                <div>
                    <p style="margin: 0 0 0.25rem; color: var(--text-main); font-weight: 700; font-size: 0.9rem;">Commission Bonus</p>
                    <p style="margin: 0; color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">2025-06-06 16:22:45</p>
                </div>
                <p style="margin: 0; color: #34d399; font-weight: 800; font-family: var(--font-mono);">+€5.00</p>
            </div>
        </div>

    </div>
{% endblock %}