{% extends 'core/base.html' %}
{% block title %}Clear Credit - SwiftPOS{% endblock %}
{% block topbar_title %}Clear Credit{% endblock %}

{% block content %}
<div class="container-fluid px-0" style="max-width: 560px;">

    <!-- Back navigation -->
    <div class="mb-3">
        <a href="{% url 'sales:credit_customers' %}?tab=credit" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to Credit Customers
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-header">
            <h6 class="mb-0 fw-bold"><i class="fas fa-money-bill-wave me-2"></i>Clear Customer Credit</h6>
        </div>
        <div class="card-body">
            <!-- Order summary -->
            <div class="p-3 rounded-3 mb-3" style="background:var(--sp-surface-muted,#f9fafb);">
                <div class="row g-2">
                    <div class="col-6">
                        <div class="small text-muted">Customer</div>
                        <div class="fw-semibold">{{ order.customer_name|default:"—" }}</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted">Order #</div>
                        <div class="fw-semibold font-monospace">{{ order.order_number }}</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted">Total Amount</div>
                        <div class="fw-semibold">{{ currency_symbol }}{{ order.final_amount|floatformat:2 }}</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted">Outstanding Balance</div>
                        <div class="fw-bold text-danger fs-5">{{ currency_symbol }}{{ order.balance_amount|floatformat:2 }}</div>
                    </div>
                </div>
            </div>

            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label class="form-label fw-semibold small">Amount Paying Now</label>
                    <div class="input-group">
                        <span class="input-group-text">{{ currency_symbol }}</span>
                        <input type="number" step="0.01" min="0.01" max="{{ order.balance_amount }}"
                               name="amount" class="form-control"
                               placeholder="e.g. {{ order.balance_amount|floatformat:2 }}"
                               value="{{ order.balance_amount|floatformat:2 }}">
                    </div>
                    <div class="form-text">Leave at the full amount to clear the entire balance.</div>
                </div>
                <div class="d-grid gap-2">
                    <button class="btn btn-success" type="submit">
                        <i class="fas fa-check-circle me-1"></i>Clear Credit
                    </button>
                    <a href="{% url 'sales:credit_customers' %}?tab=credit" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}