{% extends "partials/dashboard-base.html" %}
{% block content %}

<style>
    input, select, textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

input:focus, select:focus, textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
</style>
<div class="container mt-5 pt-5">
   
    <div class="card shadow-lg">
        <div class="card-header bg-dark text-white">
            <h3 class="text-center text-light">Wire Transfer</h3>
        </div>
       
        <div class="card-body">
            <form id="transferForm" method="POST" class="needs-validation" novalidate onsubmit="showConfirmationModal(event);">
    {% csrf_token %}
    
    {% for field in form %}
        <div class="mb-3">
            <label class="form-label">{{ field.label }}</label>
            {{ field }}
            {% if field.help_text %}
                <small class="form-text text-muted">{{ field.help_text }}</small>
            {% endif %}
            {% for error in field.errors %}
                <div class="text-danger">{{ error }}</div>
            {% endfor %}
        </div>
    {% endfor %}
    
    <button type="submit" class="btn btn-primary w-100">Submit Transfer</button>
</form>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationModalLabel">Confirm Transfer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to proceed with this transfer?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" onclick="submitForm()">Yes, Proceed</button>
            </div>
        </div>
    </div>
</div>
        </div>
    </div>
</div>

<script>
   
  function submitForm() {
    let modalElement = document.getElementById('confirmationModal');
    let modalInstance = bootstrap.Modal.getInstance(modalElement);
    
    if (modalInstance) {
        modalInstance.hide();  // Close the modal before submission
    }

    // Submit the form to redirect to OTP verification
    document.getElementById("transferForm").submit();
}
    
    document.addEventListener("DOMContentLoaded", function() {
    const bankInput = document.getElementById("id_bank_name");
    const customBankInput = document.getElementById("id_custom_bank_name");

    bankInput.addEventListener("change", function() {
        if (bankInput.value === "Other") {
            customBankInput.style.display = "block";
        } else {
            customBankInput.style.display = "none";
        }
    });

    // Auto-suggest banks (Mock AJAX request)
    bankInput.addEventListener("input", function() {
        let bankList = ["Chase Bank", "Bank of America", "Wells Fargo", "HSBC", "Citibank"];
        let inputValue = bankInput.value.toLowerCase();

        let suggestions = bankList.filter(bank => bank.toLowerCase().includes(inputValue));
        console.log("Suggestions:", suggestions);  // Replace with actual UI dropdown
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector(".needs-validation");

    if (form) {
        form.addEventListener("submit", function (event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add("was-validated");
        });
    }
});
</script>
{% endblock %}