{% extends 'partials/base.html' %}
{% load static %}
{% load humanize %}

{% block content %}
    <style>
        /* body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        } */
        .wallet-card {
            background-color: #e0f7fa;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .wallet-info {
            display: flex;
            flex-direction: column;
        }
        .wallet-info h1 {
            font-size: 16px;
            color: #555;
            margin-bottom: 5px;
        }
        .wallet-info p {
            font-size: 24px;
            color: #001c6e;
            margin: 0;
        }
        .wallet-icon {
            background-color: #ffffff;
            padding: 10px;
            border-radius: 50%;
        }
        .wallet-icon img {
            width: 30px;
            height: 30px;
        }
        .fund-button {
            background-color: #d32f2f;
            color: white;
            padding: 10px;
            text-align: center;
            border-radius: 0 0 10px 10px;
            text-decoration: none;
            display: block;
            margin-top: 20px;
        }
        .two_a {
            color: white;
            text-decoration: none;
            padding: 10px;
            margin-top: 5px;
            border-radius: 10px;
        }
        .rower {
            padding: 5px;
            border: #007bff;
            border-style: solid;
            border-radius: 20px;
        }
        .rower-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .buy-button {
        padding: 10px 20px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    .buy-button:hover {
        background-color: #0056b3;
    }

    .popup-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .popup-content {
        background: #fff;
        width: 300px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    .popup-header {
        background: #007BFF;
        padding: 15px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .popup-header h2 {
        margin: 0;
    }

    .close-button {
        cursor: pointer;
    }

    .popup-body {
        padding: 20px;
    }

    .popup-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    #gateway-select {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .popup-footer {
        padding: 15px;
        background: #007BFF;
        text-align: center;
    }

    .payment-button {
        background: #fff;
        color: #007BFF;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
    }

    .payment-button:hover {
        background: #f1f1f1;
    }
    </style>

<div class="two_button" style="display: grid; margin-top: 10px; text-align: center;">
    <a class="two_a" style="background: #007bff;" href="https://thesuftboost.com">Boost Account</a>
    <a class="two_a" style="background: red;" href="https://wa.me//+2348084924825">Buy Number</a>
</div>

{% if request.user.is_authenticated %}
<div class="intro">
    <h4 style="text-align: center;">Welcome! {{ request.user.username }}</h4>
</div>
{% else %}
{% endif %}


<div class="wallet-card">
    <div class="wallet-info">
        <h1>Add Funds</h1>
        <a style="text-decoration: none;" href="/deposit/"><p>Fund Wallet</p></a>
    </div>
    <div class="wallet-icon">
        <a href="/deposit/">
            <img src="{% static 'img/wallet.jpg' %}" alt="Wallet Icon">
        </a>
    </div>
</div>

<div class="wallet-card">
    <div class="wallet-info">
        <h1>Total Spent</h1>
        <p>₦{{ spent|floatformat:2|intcomma }}</p>
    </div>
    <div class="wallet-icon">
        <img src="{% static 'img/wallet.jpg' %}" alt="Wallet Icon">
    </div>
</div>

<div class="wallet-card">
    <div class="wallet-info">
        <h1>Orders</h1>
        <p>{{ orders }}</p>
    </div>
    <div class="wallet-icon">
        <img src="{% static 'img/wallet.jpg' %}" alt="Wallet Icon">
    </div>
</div>

<div class="wallet-card">
    <div class="wallet-info">
        <h1>Balance</h1>
        <p>₦{{ bal.balance|floatformat:2|intcomma }}</p>
    </div>
    <div class="wallet-icon">
        <img src="{% static 'img/wallet.jpg' %}" alt="Wallet Icon">
    </div>
</div>

<h3 style="color: #007bff;">Latest Payment History</h3>
{% for p in trans %}
<div class="rower">
    <div class="rower-row">
        <span>Gateway | Trx</span>
        <span>Flutterwave</span>
    </div>
    <div class="rower-row">
        <span>Paid at</span>
        <span>{{ p.date }}</span>
    </div>
    <div class="rower-row">
        <span>Amount</span>
        <span>₦{{ p.amount|intcomma }}</span>
    </div>
    <div class="rower-row">
        <span>Status</span>
        <span>{{ p.status }}</span>
    </div>
    <div class="rower-row">
        <span>Admin Feedback</span>
        <span>{{ p.feedback }}</span>
    </div>
</div>
{% endfor %}

<script>
    // Function to show the popup
    function showPopup() {
        document.getElementById('popup').style.display = 'flex';
    }

    // Function to close the popup
    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }
</script>
{% endblock content %}