{% extends "base.html" %}

{% block title %}{{ bill.bill_number }}{% endblock %}
{% block page_title %}{{ bill.bill_number }}{% endblock %}
{% block page_subtitle %}Invoice for {{ bill.order.order_number }}{% endblock %}

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

<div class="flex flex-wrap gap-3 mb-6">
    <a href="{% url 'orders:preview_invoice' bill.order.pk %}" class="btn-primary" target="_blank" rel="noopener">Preview PDF</a>
    <a href="{% url 'orders:download_invoice' bill.order.pk %}" class="btn-secondary">Download PDF</a>
    <a href="{% url 'orders:detail' bill.order.pk %}" class="btn-secondary">View Order</a>
    <a href="{% url 'billing:invoice_list' %}" class="btn-secondary">Back to Invoices</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Invoice Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Invoice #: </dt><dd class="inline font-medium">{{ bill.bill_number }}</dd></div>
            <div><dt class="text-slate-500 inline">Generated: </dt><dd class="inline">{{ bill.generated_at|date:"d M Y, H:i" }}</dd></div>
            <div><dt class="text-slate-500 inline">Generated By: </dt><dd class="inline">{{ bill.generated_by.get_full_name|default:bill.generated_by.username|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">WhatsApp Sent: </dt><dd class="inline">{% if bill.sent_on_whatsapp %}Yes{% if bill.whatsapp_sent_at %} ({{ bill.whatsapp_sent_at|date:"d M Y, H:i" }}){% endif %}{% else %}No{% endif %}</dd></div>
        </dl>
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Order &amp; Customer</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' bill.order.pk %}" class="text-brand-600 hover:underline">{{ bill.order.order_number }}</a></dd></div>
            <div><dt class="text-slate-500 inline">Customer: </dt><dd class="inline"><a href="{% url 'customers:detail' bill.order.customer.pk %}" class="text-brand-600 hover:underline">{{ bill.order.customer.name }}</a></dd></div>
            <div><dt class="text-slate-500 inline">Mobile: </dt><dd class="inline">{{ bill.order.customer.mobile_number }}</dd></div>
            <div><dt class="text-slate-500 inline">Grand Total: </dt><dd class="inline font-medium">₹{{ bill.order.grand_total }}</dd></div>
            <div><dt class="text-slate-500 inline">Balance: </dt><dd class="inline">₹{{ bill.order.balance_amount }}</dd></div>
        </dl>
    </div>
</div>

{% if bill.invoice_pdf %}
<div class="card">
    <h3 class="text-lg font-semibold mb-4">PDF Preview</h3>
    <iframe src="{% url 'orders:preview_invoice' bill.order.pk %}" class="w-full rounded-lg border border-slate-200" style="min-height:600px" title="Invoice preview"></iframe>
</div>
{% else %}
<div class="card">
    <p class="text-slate-500 text-sm">PDF not available. {% if can_manage %}<a href="{% url 'orders:generate_invoice' bill.order.pk %}" class="text-brand-600 hover:underline">Generate invoice</a>{% endif %}</p>
</div>
{% endif %}
{% endblock %}