{% 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);
    }
    
    /* Hide custom bank field initially */
    #id_custom_bank_name {
        display: none;
    }
    
    /* Show when "Other" is selected */
    #id_bank_name[value="Other"] ~ #id_custom_bank_name {
        display: block;
    }
</style>

<section class="container mt-5 pt-5">
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            <h3 class="text-center text-light">Domestic Transfer</h3>
        </div>
         
        <div class="card-body">
            <form id="transferForm" method="POST" class="needs-validation" novalidate>
                {% csrf_token %}
                
                <!-- Render hidden fields first -->
                {% for field in form.hidden_fields %}
                    {{ field }}
                {% endfor %}
                
                <!-- Render visible fields -->
                {% for field in form.visible_fields %}
                    <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="button" class="btn btn-primary w-100" onclick="showConfirmationModal()">
                    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="button" class="btn btn-primary" onclick="submitForm()">Yes, Proceed</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // Handle bank name selection
    document.addEventListener("DOMContentLoaded", function() {
        const bankSelect = document.getElementById("id_bank_name");
        const customBankInput = document.getElementById("id_custom_bank_name");
        
        if (bankSelect && customBankInput) {
            // Initial check
            if (bankSelect.value === "Other") {
                customBankInput.style.display = "block";
            }
            
            // Change event listener
            bankSelect.addEventListener("change", function() {
                customBankInput.style.display = this.value === "Other" ? "block" : "none";
                if (this.value !== "Other") {
                    customBankInput.value = "";
                }
            });
        }
        
        // Form validation
        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");
            });
        }
    });
    
    // Show confirmation modal
    function showConfirmationModal() {
        // First validate form
        const form = document.getElementById("transferForm");
        if (form.checkValidity()) {
            const modal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            modal.show();
        } else {
            form.classList.add("was-validated");
        }
    }
    
    // Submit form after confirmation
    function submitForm() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('confirmationModal'));
        if (modal) {
            modal.hide();
        }
        document.getElementById("transferForm").submit();
    }
</script>
{% endblock %}