{% extends "base.html" %}

{% block title %}کیف پول - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:40px 0;">
    <div class="container">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;">
            <h1 style="font-size:28px;color:#0d1b6b;">💰 کیف پول</h1>
            <a href="{{ url_for('user_dashboard') }}" style="background:#eee;padding:10px 25px;border-radius:30px;color:#333;">بازگشت</a>
        </div>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div style="padding:15px;border-radius:10px;margin-bottom:20px;background:{% if category == 'success' %}#d4edda;color:#155724;{% else %}#f8d7da;color:#721c24;{% endif %}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;">
            <!-- موجودی و شارژ -->
            <div style="background:white;padding:30px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                <div style="text-align:center;padding:20px 0;">
                    <div style="font-size:14px;color:#888;">موجودی فعلی</div>
                    <div style="font-size:36px;font-weight:900;color:#0d1b6b;">{{ user.wallet|default(0)|persian_numbers }} <span style="font-size:18px;">تومان</span></div>
                </div>
                
                <form method="POST" style="margin-top:20px;border-top:1px solid #eee;padding-top:20px;">
                    <h4 style="margin-bottom:15px;">شارژ کیف پول</h4>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;">
                        <input type="number" name="amount" placeholder="مبلغ به تومان" style="flex:1;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;min-width:150px;" required>
                        <button type="submit" style="background:#25d366;color:white;padding:12px 30px;border:none;border-radius:8px;font-weight:700;cursor:pointer;">
                            <i class="fas fa-plus"></i> شارژ
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- تراکنش‌ها -->
            <div style="background:white;padding:30px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                <h4 style="margin-bottom:15px;">📋 تاریخچه تراکنش‌ها</h4>
                {% if transactions %}
                    {% for t in transactions[:10] %}
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div>
                            <div style="font-weight:500;font-size:14px;">{{ t.description }}</div>
                            <div style="font-size:12px;color:#888;">{{ t.created_at|persian_date }}</div>
                        </div>
                        <div style="font-weight:700;color:{% if t.amount > 0 %}#25d366;{% else %}#e53935;{% endif %}">
                            {% if t.amount > 0 %}+{% endif %}{{ t.amount|persian_numbers }}
                        </div>
                    </div>
                    {% endfor %}
                    {% if transactions|length > 10 %}
                    <div style="text-align:center;padding-top:10px;color:#888;font-size:13px;">و {{ transactions|length - 10 }} تراکنش دیگر ...</div>
                    {% endif %}
                {% else %}
                    <div style="text-align:center;padding:30px 0;color:#888;">
                        <i class="fas fa-inbox" style="font-size:40px;display:block;margin-bottom:10px;"></i>
                        هیچ تراکنشی ثبت نشده است.
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

{% endblock %}