{% extends "finance/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-5">
    <h2>Edit Journal Entry #{{ journal_entry_id }}</h2>
    <form method="post" action="{% url 'update_journal_entry' journal_entry_id %}">
        {% csrf_token %}
        <div class="mb-3">
            <label for="acct_no" class="form-label">Account No</label>
            <select class="form-select" id="acct_no" name="acct_no" required>
                <option value="" disabled>Select Account</option>
                {% for account in accounts %}
                    <option value="{{ account.acct_no }}" {% if account.acct_no == form.instance.acct_no %}selected{% endif %}>
                        {{ account.acct_no }} - {{ account.acct_name }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="mb-3">
            <label for="descript" class="form-label">Description</label>
            <textarea class="form-control" id="descript" name="descript" rows="3" required>{{ form.instance.descript }}</textarea>
        </div>
        <div class="mb-3">
            <label for="idramt_modal" class="form-label">IDR Amount</label>
            <input type="text" class="form-control" id="idramt_modal" name="idramt_modal" value="{{ form.instance.idramt }}">
        </div>
        <div class="mb-3">
            <label for="usdamt_modal" class="form-label">USD Amount</label>
            <input type="text" class="form-control" id="usdamt_modal" name="usdamt_modal" value="{{ form.instance.usdamt|floatformat:2 }}">
        </div>
        <button type="submit" class="btn btn-primary">Save Changes</button>
        <a href="{% url 'journals' %}" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<div class="container mt-5">
    <h2>Edit Journal Entry #{{ journal_entry_id }}</h2>
    <p>DEBUG Rate from Template: {{ rate }}</p>  <--- ADD THIS LINE
    <form method="post" action="{% url 'update_journal_entry' journal_entry_id %}">
        {% csrf_token %}
        </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
    $(document).ready(function() {
        $('#idramt_modal').mask('#.##0', { reverse: true });
        $('#usdamt_modal').mask('#,##0.00', { reverse: true });
    
        $('#idramt_modal').on('input', function() { // Listen for the 'input' event
            calculateUSD();
        });
    
        function calculateUSD() {
            console.log("calculateUSD() is being called.");
            var rate = parseFloat("{{ rate }}");
            console.log("Rate:", rate);
            var idramt = parseFloat($('#idramt_modal').val().replace(/\./g, '').replace(',', '.')); // Remove formatting
            console.log("IDR Amount:", idramt);
            var usdamtInput = $('#usdamt_modal');
        
            if (!isNaN(rate) && !isNaN(idramt)) {
                var calculatedUsdamt = idramt / rate;
                usdamtInput.val(calculatedUsdamt.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            } else {
                usdamtInput.val('');
            }
        }
    });
</script>
{% endblock %}