{% 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>Currency Exchange</h4>
                    <div class="icon-area">
                        <img src="{% static 'assets1/images/icon/account.png' %}" alt="icon">
                    </div>
                </div>

                <div class="exchange-form">
                    <form method="post" id="exchangeForm">
                        {% csrf_token %}
                        <div class="send-banance">
                            <span class="mdr">From Currency</span>
                            <div class="input-area">
                                <select name="from_currency" id="from_currency" class="form-select">
                                    <option value="USD">USD - US Dollar</option>
                                    <option value="EUR">EUR - Euro</option>
                                    <option value="JPY">JPY - Yen</option>
                                    <option value="GBP">GBP - British Pound</option>
                                </select>
                            </div>
                        </div>

                        <div class="send-banance">
                            <span class="mdr">To Currency</span>
                            <div class="input-area">
                                <select name="to_currency" id="to_currency" class="form-select">
                                    <option value="USD">USD - US Dollar</option>
                                    <option value="EUR">EUR - Euro</option>
                                    <option value="JPY">JPY - Yen</option>
                                    <option value="GBP">GBP - British Pound</option>
                                </select>
                            </div>
                        </div>

                        <div class="send-banance">
                            <span class="mdr">Amount</span>
                            <div class="input-area">
                                <input type="number" id="amount" name="amount" class="form-control" required>
                            </div>
                        </div>

                        <div class="send-banance">
                            <span class="mdr">Converted Amount</span>
                            <div class="input-area">
                                <input type="text" id="converted_amount" class="form-control" readonly>
                            </div>
                        </div>

                        <div class="footer-area mt-40">
                            <button type="button" onclick="convertCurrency()" class="btn btn-primary">Check Rate</button>
                            <button type="submit" class="btn btn-success">Exchange</button>
                        </div>
                    </form>
                </div>

                <!-- Show exchange rate info -->
                <div class="mt-4">
                    <p id="exchange_rate_info"></p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript to Fetch Exchange Rate -->
<script>
    async function convertCurrency() {
        const fromCurrency = document.getElementById("from_currency").value;
        const toCurrency = document.getElementById("to_currency").value;
        const amount = document.getElementById("amount").value;

        if (!amount || amount <= 0) {
            alert("Please enter a valid amount.");
            return;
        }

        const response = await fetch(`/get-exchange-rate/?from=${fromCurrency}&to=${toCurrency}&amount=${amount}`);
        const data = await response.json();

        if (data.success) {
            document.getElementById("converted_amount").value = data.converted_amount;
            document.getElementById("exchange_rate_info").innerHTML = `1 ${fromCurrency} = ${data.exchange_rate} ${toCurrency}`;
        } else {
            alert("Error fetching exchange rate. Please try again.");
        }
    }
</script>
{% endblock %}