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

{% block title %}Edit Opening Balance{% endblock title %}

{% block stylesheets %}
{{ block.super }}
<style>
.ob-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0,0,0,.08);
    border: 1px solid #e3e6f0;
    overflow: hidden;
}
.ob-header {
    background: linear-gradient(135deg, #1170c6 0%, #0d5aa7 100%);
    padding: 30px;
    text-align: center;
    color: #fff;
}
.ob-header h4 { margin: 0; font-weight: 700; }
.ob-header .sub { opacity: .85; font-size: .9rem; }
.ob-body { padding: 30px; }
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f8;
    font-size: .95rem;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: #718096; font-weight: 500; }
.info-value { color: #2d3748; font-weight: 600; }
.bal-card {
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #fff;
}
.bal-card.green  { background: linear-gradient(135deg,#11998e,#38ef7d); }
.bal-card.red    { background: linear-gradient(135deg,#eb3349,#f45c43); }
.bal-card.blue   { background: linear-gradient(135deg,#1170c6,#0d5aa7); }
.bal-card .lbl   { font-size: .85rem; opacity: .9; margin-bottom: 4px; }
.bal-card .amt   { font-size: 1.8rem; font-weight: 700; }
.ob-input {
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 14px 18px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: right;
    transition: all .3s;
}
.ob-input:focus {
    border-color: #1170c6;
    box-shadow: 0 0 0 3px rgba(17,112,198,.15);
}
.btn-save-ob {
    background: linear-gradient(135deg, #1170c6 0%, #0d5aa7 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 40px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    transition: all .3s;
    box-shadow: 0 4px 15px rgba(17,112,198,.35);
}
.btn-save-ob:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(17,112,198,.45);
    color: #fff;
}
</style>
{% endblock stylesheets %}

{% block heading %}
<span><i class="fas fa-edit mr-2"></i>Edit Opening Balance</span>
{% endblock heading %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-7 col-xl-6">

            <div class="ob-card mb-4">
                <div class="ob-header">
                    <h4>{{ vendor_obj.name|title }}</h4>
                    <div class="sub">ID: {{ vendor_obj.t_id }}</div>
                </div>

                <div class="ob-body">
                    <h6 class="text-muted mb-3">
                        <i class="fas fa-receipt mr-1"></i> Payment Details
                    </h6>

                    <div class="info-row">
                        <span class="info-label">Invoice #</span>
                        <span class="info-value">{{ payment.description }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Title</span>
                        <span class="info-value">{{ payment.bill_title_descp|default:"—" }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Transaction Date</span>
                        <span class="info-value">{{ payment.transaction_date }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Amount Transaction</span>
                        <span class="info-value">{{ payment.amount_transaction }}</span>
                    </div>

                    <hr>

                    <div class="row mb-4">
                        <div class="col-6">
                            <div class="bal-card blue">
                                <div class="lbl">Current Opening Bal</div>
                                <div class="amt" id="currentOB">{{ payment.total_amount }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bal-card {% if vendor_obj.balance < 0 %}red{% else %}green{% endif %}">
                                <div class="lbl">Vendor Balance</div>
                                <div class="amt">{{ vendor_obj.balance }}</div>
                            </div>
                        </div>
                    </div>

                    <form method="post" id="ob-form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label class="font-weight-bold text-dark">
                                <i class="fas fa-pen mr-1 text-primary"></i>
                                New Opening Balance (Total Amount)
                            </label>
                            <input type="number"
                                   step="0.01"
                                   name="total_amount"
                                   id="id_total_amount"
                                   class="form-control ob-input"
                                   value="{{ payment.total_amount }}"
                                   required
                                   autofocus
                                   oninput="previewChange()">
                            <small class="form-text text-muted mt-2">
                                Only <strong>Total Amount</strong> will be updated.
                                Vendor balance will be automatically reconciled.
                            </small>
                        </div>

                        <div class="alert alert-info d-none" id="changePreview">
                            <i class="fas fa-info-circle mr-1"></i>
                            Change: <strong id="diffVal"></strong> &nbsp;→&nbsp;
                            Estimated new balance:
                            <strong id="estBal"></strong>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-save-ob">
                                <i class="fas fa-save mr-2"></i>Update Opening Balance
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
    const origTotal = parseFloat("{{ payment.total_amount }}") || 0;
    const vendBalance = parseFloat("{{ vendor_obj.balance }}") || 0;

    const input   = document.getElementById('id_total_amount');
    const preview = document.getElementById('changePreview');
    const diffEl  = document.getElementById('diffVal');
    const estEl   = document.getElementById('estBal');

    window.previewChange = function () {
        const newVal = parseFloat(input.value) || 0;
        const diff   = newVal - origTotal;

        if (Math.abs(diff) < 0.001) {
            preview.classList.add('d-none');
            return;
        }

        const estBalance = vendBalance + diff;
        const sign = diff > 0 ? '+' : '';
        diffEl.textContent = sign + diff.toFixed(2);
        estEl.textContent  = estBalance.toFixed(2);

        preview.classList.remove('d-none');
        preview.className = 'alert ' + (diff > 0 ? 'alert-success' : 'alert-warning');
    };

    document.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            document.getElementById('ob-form').submit();
        }
    });

    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.getElementById('ob-form').submit();
        }
    });
})();
</script>
{% endblock javascripts %}