{% extends "partials/dashboard-base.html" %}
{% load static %}
{% block content %}
<section class="dashboard-section body-collapse pay step step-2">
    <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>Make a Payment</h4>
                    <div class="icon-area">
                        <img src="{% static 'assets1/images/icon/pay.png' %}" width="50%" alt="ixcon">
                    </div>
                </div>
                
                <div class="choose-recipient">
                    <div class="step-area">
                        <span class="mdr">Step 2 of 3</span>
                        <h5>Select Bank & Set Amount</h5>
                    </div>
                    
                    <!-- Bank Selection Form -->
                    <form action="{% url 'core:amount-transfer-process' account.account_number  %}" method="POST">
                        {% csrf_token %}

                        <!-- Bank Type (Local or International) -->
                        <div class="send-banance">
                            <span class="mdr">Bank Type</span>
                            <div class="input-area">
                                <select id="bank-type" class="form-select">
                                    <option value="local">Local Bank (USA)</option>
                                    <option value="international">International Bank</option>
                                </select>
                            </div>
                        </div>

                        <!-- Bank List -->
                        <div class="send-banance">
                            <span class="mdr">Select Bank</span>
                            <div class="input-area">
                                <select name="bank_name" id="bank-list" class="form-select" required>
                                    <option value="">Select a Bank</option>
                                </select>
                            </div>
                        </div>

                        <!-- Account Number -->
                        <div class="send-banance">
                            <span class="mdr">Recipient Account Number</span>
                            <div class="input-area">
                                <input class="xxlr" type="text" name="account_number" required>
                            </div>
                        </div>

                        <!-- Amount -->
                        <div class="send-banance">
                            <span class="mdr">You Send</span>
                            <div class="input-area">
                                <input class="xxlr" type="number" name="amount-send" id="amount-send" required>
                                <select name="currency">
                                    <option value="USD">USD</option>
                                    <option value="EUR">EUR</option>
                                    <option value="NGN">NGN</option>
                                    <option value="GBP">GBP</option>
                                </select>
                            </div>
                            <p>Available Balance<b>${{ request.user.account.account_balance }}</b></p>
                        </div>

                        <div class="footer-area mt-40">
                            <button type="button" onclick="goBack()" class="btn btn-secondary">Previous Step</button>
                            <button type="submit" class="btn btn-primary active">Next</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript for Dynamic Bank Selection -->
<script>
    const bankList = document.getElementById("bank-list");
    const bankType = document.getElementById("bank-type");

    // List of banks
    const localBanks = [
        "Bank of America", "Chase Bank", "Wells Fargo", "Citibank", "PNC Bank", "TD Bank"
    ];

    const internationalBanks = [
        "HSBC", "Barclays", "Deutsche Bank", "Standard Chartered", "BNP Paribas", "UBS"
    ];

    function updateBankList() {
        bankList.innerHTML = '<option value="">Select a Bank</option>';
        const banks = bankType.value === "local" ? localBanks : internationalBanks;
        banks.forEach(bank => {
            let option = document.createElement("option");
            option.value = bank;
            option.textContent = bank;
            bankList.appendChild(option);
        });
    }

    bankType.addEventListener("change", updateBankList);
    updateBankList(); // Initialize on page load

    function goBack() {
        window.history.back();
    }
</script>
{% endblock %}