{% extends "base.html" %}

{% block title %}{{ payment.payment_number }}{% endblock %}
{% block page_title %}{{ payment.payment_number }}{% endblock %}
{% block page_subtitle %}₹{{ payment.amount_paid }} — {{ payment.get_payment_mode_display }}{% endblock %}

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

<div class="flex flex-wrap gap-3 mb-6">
    {% if can_manage %}
    <a href="{% url 'payments:edit' payment.pk %}" class="btn-primary">Edit Payment</a>
    <a href="{% url 'payments:deactivate' payment.pk %}" class="btn-secondary">Deactivate</a>
    {% endif %}
    <a href="{% url 'payments:list' %}" class="btn-secondary">Back to Payments</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Payment Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Payment #: </dt><dd class="inline font-medium">{{ payment.payment_number }}</dd></div>
            <div><dt class="text-slate-500 inline">Amount: </dt><dd class="inline font-medium">₹{{ payment.amount_paid }}</dd></div>
            <div><dt class="text-slate-500 inline">Mode: </dt><dd class="inline">{{ payment.get_payment_mode_display }}</dd></div>
            <div><dt class="text-slate-500 inline">Status: </dt><dd class="inline badge badge-counter">{{ payment.get_payment_status_display }}</dd></div>
            <div><dt class="text-slate-500 inline">Date: </dt><dd class="inline">{{ payment.payment_date|date:"d M Y" }}</dd></div>
            <div><dt class="text-slate-500 inline">Reference: </dt><dd class="inline">{{ payment.transaction_reference|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Received By: </dt><dd class="inline">{{ payment.received_by.get_full_name|default:payment.received_by.username|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Overpayment Confirmed: </dt><dd class="inline">{% if payment.overpayment_confirmed %}Yes{% else %}No{% endif %}</dd></div>
            <div><dt class="text-slate-500 inline">Notes: </dt><dd class="inline">{{ payment.notes|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Recorded: </dt><dd class="inline">{{ payment.created_at|date:"d M Y, H:i" }}</dd></div>
        </dl>
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Order Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Order #: </dt><dd class="inline font-medium"><a href="{% url 'orders:detail' payment.order.pk %}" class="text-brand-600 hover:underline">{{ payment.order.order_number }}</a></dd></div>
            <div><dt class="text-slate-500 inline">Customer: </dt><dd class="inline"><a href="{% url 'customers:detail' payment.order.customer.pk %}" class="text-brand-600 hover:underline">{{ payment.order.customer.name }}</a></dd></div>
            <div><dt class="text-slate-500 inline">Mobile: </dt><dd class="inline">{{ payment.order.customer.mobile_number }}</dd></div>
            <div><dt class="text-slate-500 inline">Grand Total: </dt><dd class="inline">₹{{ payment.order.grand_total }}</dd></div>
            <div><dt class="text-slate-500 inline">Balance: </dt><dd class="inline">₹{{ payment.order.balance_amount }}</dd></div>
        </dl>
    </div>
</div>
{% endblock %}