{% extends "partials/dashboard-base.html" %}
{% load static %}
{% block content %}
<section class="dashboard-section body-collapse">
    <div class="overlay pt-120">
        <div class="container-fruid">
            <div class="main-content">
                <div class="head-area d-flex align-items-center justify-content-between">
                    <h4>Withdraw Funds</h4>
                </div>

                <div class="withdraw-options">
                    <h5>Select Withdrawal Method</h5>
                    <select id="withdraw-method" class="form-select mb-4">
                        <option value="card">Card Withdrawal</option>
                        <option value="crypto">Crypto Withdrawal</option>
                    </select>
                </div>

                <!-- Card Withdrawal -->
                <div id="card-withdraw-section">
                    <h5>Select Your Card</h5>
                    <form method="POST" action="{% url 'account:validate_pin' %}">
                        {% csrf_token %}
                        <select name="selected_card" class="form-select mb-3">
                            {% for card in user.creditcard_set.all %}
                                <option value="{{ card.id }}">{{ card.name }} - {{ card.card_type|upper }}</option>
                            {% empty %}
                                <option disabled>No cards available</option>
                            {% endfor %}
                        </select>
                        <input type="number" name="amount" class="form-control mb-3" placeholder="Enter Withdrawal Amount">
                        <button type="submit" class="btn btn-primary w-100">Withdraw</button>
                    </form>
                </div>

                <!-- Crypto Withdrawal -->
                <div id="crypto-withdraw-section" style="display:none;">
                    <h5>Enter Your Crypto Wallet</h5>
                    <form method="POST" action="{% url 'account:validate_pin' %}">
                        {% csrf_token %}
                        <input type="text" name="wallet_address" class="form-control mb-3" placeholder="Enter Wallet Address">
                        <select name="crypto_currency" class="form-select mb-3">
                            <option value="bitcoin">Bitcoin (BTC)</option>
                            <option value="usdt">USDT (TRC20)</option>
                        </select>
                        <input type="number" name="amount" class="form-control mb-3" placeholder="Enter Withdrawal Amount">
                        <button type="submit" class="btn btn-primary w-100">Withdraw</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.getElementById("withdraw-method").addEventListener("change", function() {
        document.getElementById("card-withdraw-section").style.display = (this.value === "card") ? "block" : "none";
        document.getElementById("crypto-withdraw-section").style.display = (this.value === "crypto") ? "block" : "none";
    });
</script>

{% endblock %}