{% extends "partials/dashboard-base.html" %}
{% block content %}
<style>
  .form-control {
    border-radius: 5px;
    border: 1px solid #ced4da;
    padding: 10px;
    font-size: 16px;
}

.form-label {
    font-weight: bold;
    color: #333;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    border-radius: 5px;
}

</style>

<div class="container pt-5 pb-3 mt-5">
    <h2 class="mt-4">Initiate Transfer</h2>
    <form method="post">
        {% csrf_token %}
        
        <div class="mb-3">
            <label for="{{ form.amount.id_for_label }}" class="form-label">Amount</label>
            {{ form.amount }}
        </div>

        <div class="mb-3">
            <label for="{{ form.beneficiary_name.id_for_label }}" class="form-label">Beneficiary Name</label>
            {{ form.beneficiary_name }}
        </div>

        <div class="mb-3">
            <label for="{{ form.bank_name.id_for_label }}" class="form-label">Bank Name</label>
            <select id="bank_name" name="{{ form.bank_name.name }}" class="form-control" onchange="toggleCustomBankInput()">
                {% for bank in form.bank_name.field.choices %}
                    <option value="{{ bank.0 }}">{{ bank.1 }}</option>
                {% endfor %}
                <option value="Other">Other</option>
            </select>
        </div>

        <div id="custom_bank_div" style="display: none;" class="mb-3">
            <label for="custom_bank_name" class="form-label">Enter Bank Name</label>
            <input type="text" id="custom_bank_name" name="custom_bank_name" class="form-control">
        </div>

        <div class="mb-3">
            <label for="{{ form.account_number.id_for_label }}" class="form-label">Account Number</label>
            {{ form.account_number }}
        </div>

        <div class="mb-3">
            <label for="{{ form.country.id_for_label }}" class="form-label">Country</label>
            {{ form.country }}
        </div>

        <div class="mb-3">
            <label for="{{ form.swift_code.id_for_label }}" class="form-label">SWIFT Code</label>
            {{ form.swift_code }}
        </div>

        <div class="mb-3">
            <label for="{{ form.routing_number.id_for_label }}" class="form-label">Routing Number</label>
            {{ form.routing_number }}
        </div>

        <div class="mb-3">
            <label for="{{ form.account_type.id_for_label }}" class="form-label">Account Type</label>
            {{ form.account_type }}
        </div>

        <div class="mb-3">
            <label for="{{ form.narration.id_for_label }}" class="form-label">Narration</label>
            {{ form.narration }}
        </div>

        <button type="submit" class="btn btn-primary">Proceed to COT Verification</button>
    </form>
</div>

<script>
    function toggleCustomBankInput() {
        var bankSelect = document.getElementById("bank_name");
        var customBankDiv = document.getElementById("custom_bank_div");
        var customBankInput = document.getElementById("custom_bank_name");
        
        if (bankSelect.value === "Other") {
            customBankDiv.style.display = "block";
            customBankInput.required = true;
        } else {
            customBankDiv.style.display = "none";
            customBankInput.required = false;
        }
    }
</script>
{% endblock %}