{% 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>Deposit Funds</h4>
                </div>

                <div class="deposit-options">
                    <h5>Select Deposit Method</h5>
                    <select id="deposit-method" class="form-select mb-4">
                        <option value="card" selected>Card Payment</option>
                        <option value="account">Bank Transfer</option>
                        <option value="crypto">Crypto Payment</option>
                    </select>
                </div>

                <!-- Card Deposit -->
                <div id="card-section">
                    <h5>Select Your Card</h5>
                    <form id="deposit-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>

                        <!-- ✅ Show Currency Next to Amount Input -->
                        <label>Deposit Amount ({{ user.currency }}):</label>
                        <input type="number" name="amount" class="form-control mb-3" placeholder="Enter Deposit Amount" required>

                        <input type="password" name="pin" class="form-control mb-3" placeholder="Enter 4-Digit PIN" required>
                        <button type="submit" class="btn btn-primary w-100">Deposit</button>
                    </form>

                    {% if not user.creditcard_set.all %}
                    <a href="{% url 'account:create_card' %}" class="btn btn-secondary w-100 mt-3">Create a New Card</a>
                    {% endif %}
                </div>

                <!-- Bank Transfer -->
                <div id="account-section" style="display:none;">
                    <h5>Transfer to Your Account</h5>
                    <p>Your Account Number:</p>
                    <div class="input-group mb-3">
                        <input type="text" id="account-number" class="form-control"
                            value="{{ request.user.account.account_number }}" readonly>
                        <button class="btn btn-primary" onclick="copyAccount()">Copy</button>
                    </div>
                    <p class="text-muted">Use the account number above to make a transfer.</p>
                </div>

                <!-- Crypto Deposit -->
                <div id="crypto-section" style="display:none;">
                    <a id="crypto-link" href="{% url 'account:crypto-payments' %}" class="btn btn-success w-100">Proceed to Crypto Payment</a>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const depositMethod = document.getElementById("deposit-method");
        const cardSection = document.getElementById("card-section");
        const accountSection = document.getElementById("account-section");
        const cryptoSection = document.getElementById("crypto-section");
        const cryptoLink = document.getElementById("crypto-link");

        function updateDepositMethod() {
            const selectedMethod = depositMethod.value;

            cardSection.style.display = "none";
            accountSection.style.display = "none";
            cryptoSection.style.display = "none";

            if (selectedMethod === "card") {
                cardSection.style.display = "block";
            } else if (selectedMethod === "account") {
                accountSection.style.display = "block"; // ✅ Shows bank account number
            } else if (selectedMethod === "crypto") {
                window.location.href = cryptoLink.href; // ✅ Redirects to crypto payment page
            }
        }

        depositMethod.addEventListener("change", updateDepositMethod);
        updateDepositMethod(); // ✅ Ensure correct display on page load
    });

    function copyAccount() {
        let copyText = document.getElementById("account-number");
        copyText.select();
        document.execCommand("copy");
        alert("Account Number Copied!");
    }
</script>

{% endblock %}