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

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

{% block stylesheets %}
{{ block.super }}
<style>
/* ═══════════════ reuse profile-card style from add page ═══════════════ */
.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 .avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.3);
    object-fit: cover;
    margin-bottom: 12px;
}
.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; }

/* balance cards */
.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; }

/* input */
.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);
}

/* button */
.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;
}

/* readonly info */
.readonly-group {
    background: #f7fafc;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: .9rem;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}
</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">
                <!-- ── Header ─────────────────────────────────── -->
                <div class="ob-header">
                
                    <h4>{{ customer_obj.name|title }}</h4>
                    <div class="sub">
                        {% if customer_obj.type_c %}{{ customer_obj.type_c }} · {% endif %}
                        ID: {{ customer_obj.t_id }}
                    </div>
                </div>

                <!-- ── Body ───────────────────────────────────── -->
                <div class="ob-body">

                    <!-- Payment Info (read-only) -->
                    <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">Category</span>
                        <span class="info-value">{{ payment.category }}</span>
                    </div>
                    <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>

                    <!-- Balance overview -->
                    <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 customer_obj.balance < 0 %}red{% else %}green{% endif %}">
                                <div class="lbl">Customer Balance</div>
                                <div class="amt">{{ customer_obj.balance }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Edit Form ──────────────────────────── -->
                    <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.
                                Customer balance will be automatically reconciled.
                            </small>
                        </div>

                        <!-- live preview -->
                        <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>

                        <p class="text-center mt-3 small text-muted">
                            <kbd>Ctrl</kbd>+<kbd>S</kbd> to save
                        </p>
                    </form>

                </div>
            </div>

        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
    const origTotal   = parseFloat("{{ payment.total_amount }}") || 0;
    const custBalance = parseFloat("{{ customer_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;
        }

        // balance formula: sum(total) - sum(amount_transaction)
        // changing total_amount by 'diff' shifts balance by 'diff'
        const estBalance = custBalance + 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');
    };

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

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