{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

{% if order %}
<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">Order Summary</h3>
    <dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
        <div>
            <dt class="text-slate-500">Order #</dt>
            <dd class="font-medium text-base">
                <a href="{% url 'orders:detail' order.pk %}" class="text-brand-600 hover:underline">{{ order.order_number }}</a>
            </dd>
        </div>
        <div>
            <dt class="text-slate-500">Customer</dt>
            <dd class="font-medium text-base">{{ order.customer.name }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Grand Total</dt>
            <dd class="font-medium text-base">₹{{ order.grand_total }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Balance Due</dt>
            <dd class="font-medium text-base text-amber-700">₹{{ order.balance_amount }}</dd>
        </div>
    </dl>
</div>
{% endif %}

<div class="card max-w-2xl">
    <form method="post" class="space-y-4">
        {% csrf_token %}

        {% if form.order.is_hidden %}
        {{ form.order }}
        {% else %}
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.order.id_for_label }}">{{ form.order.label }} *</label>
            {{ form.order }}
            {% if form.order.errors %}<p class="text-red-600 text-xs mt-1">{{ form.order.errors.0 }}</p>{% endif %}
        </div>
        {% endif %}

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.amount_paid.id_for_label }}">{{ form.amount_paid.label }} *</label>
            {{ form.amount_paid }}
            {% if form.amount_paid.errors %}<p class="text-red-600 text-xs mt-1">{{ form.amount_paid.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.payment_mode.id_for_label }}">{{ form.payment_mode.label }} *</label>
            {{ form.payment_mode }}
            {% if form.payment_mode.errors %}<p class="text-red-600 text-xs mt-1">{{ form.payment_mode.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.transaction_reference.id_for_label }}">{{ form.transaction_reference.label }}</label>
            {{ form.transaction_reference }}
            {% if form.transaction_reference.errors %}<p class="text-red-600 text-xs mt-1">{{ form.transaction_reference.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.payment_date.id_for_label }}">{{ form.payment_date.label }} *</label>
            {{ form.payment_date }}
            {% if form.payment_date.errors %}<p class="text-red-600 text-xs mt-1">{{ form.payment_date.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
            {{ form.notes }}
            {% if form.notes.errors %}<p class="text-red-600 text-xs mt-1">{{ form.notes.errors.0 }}</p>{% endif %}
        </div>

        {% if can_override %}
        <div class="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
            {{ form.overpayment_confirmed }}
            <div>
                <label class="text-sm font-medium text-slate-700" for="{{ form.overpayment_confirmed.id_for_label }}">{{ form.overpayment_confirmed.label }}</label>
                <p class="text-xs text-slate-500 mt-1">Check this if the payment amount exceeds the order balance.</p>
                {% if form.overpayment_confirmed.errors %}<p class="text-red-600 text-xs mt-1">{{ form.overpayment_confirmed.errors.0 }}</p>{% endif %}
            </div>
        </div>
        {% endif %}

        {% if form.non_field_errors %}
        <p class="text-red-600 text-sm">{{ form.non_field_errors.0 }}</p>
        {% endif %}

        <div class="flex gap-3 pt-2">
            <button type="submit" class="btn-primary">Save Payment</button>
            {% if payment %}
            <a href="{% url 'payments:detail' payment.pk %}" class="btn-secondary">Cancel</a>
            {% elif order %}
            <a href="{% url 'orders:detail' order.pk %}" class="btn-secondary">Cancel</a>
            {% else %}
            <a href="{% url 'payments:list' %}" class="btn-secondary">Cancel</a>
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}