{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
    <div class="card border-0 shadow-lg rounded-4 overflow-hidden" id="invoiceCard">
        <div class="card-header bg-white border-bottom p-5">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold text-primary mb-1">Wilson Trade</h2>
                    <p class="text-muted small mb-0">and Rashan Mart</p>
                </div>
                <div class="text-end">
                    <h4 class="fw-bold mb-1">INVOICE</h4>
                    <p class="text-muted mb-0">#{{ order.id }}</p>
                </div>
            </div>
        </div>

        <div class="card-body p-5">
            <div class="row mb-5">
                <div class="col-6">
                    <h6 class="fw-bold text-uppercase text-muted small mb-2">Billed To:</h6>
                    <h5 class="fw-bold mb-1">{{ order.party_name|title }}</h5>
                    <p class="mb-0 text-muted">{{ order.address }}</p>
                    <p class="mb-0 text-muted">{{ order.contact }}</p>
                    {% if order.vat_no %}<p class="mb-2 text-muted">VAT/PAN: {{ order.vat_no }}</p>{% endif %}
                </div>
                <div class="col-6 text-end">
                    <h6 class="fw-bold text-uppercase text-muted small mb-2">Date:</h6>
                    <p class="fw-bold mb-0">{{ order.created_at|date:"F d, Y" }}</p>
                    <div class="mt-3">
                        {% if order.is_cancelled %}
                            <span class="badge bg-danger fs-6 px-3 py-2">CANCELLED</span>
                        {% elif order.is_return %}
                            <span class="badge bg-warning text-dark fs-6 px-3 py-2">RETURNED</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="table-responsive mb-5">
                <table class="table table-borderless align-middle">
                    <thead class="bg-light text-uppercase small text-muted">
                        <tr>
                            <th class="py-3 ps-4">#</th>
                            <th class="py-3">Item Description</th>
                            <th class="py-3 text-center">Qty</th>
                            <th class="py-3 text-end">Price</th>
                            <th class="py-3 text-end pe-4">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in order.items.all %}
                        <tr class="border-bottom">
                            <td class="ps-4 py-3 text-muted">{{ forloop.counter }}</td>
                            <td class="py-3 fw-bold text-dark">{{ item.product.name }}</td>
                            <td class="py-3 text-center">{{ item.quantity }}</td>
                            <td class="py-3 text-end">{{ item.product.price_per_packet }}</td>
                            <td class="py-3 text-end pe-4 fw-bold">{{ item.item_total }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="row justify-content-end">
                <div class="col-md-4">
                    <div class="border-top pt-3">
                        <div class="d-flex justify-content-between align-items-center bg-light p-3 rounded">
                            <span class="fw-bold fs-5 text-dark">Grand Total</span>
                            <span class="fw-bold fs-5 text-primary">Rs. {{ order.total_amount }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-5 text-center text-muted small">
                <p class="mb-0">Thank you for your business!</p>
                <p>For inquiries, contact us at <strong>info@wilsontrade.com</strong></p>
            </div>
        </div>
    </div>

    <div class="text-center mt-4 mb-5 d-print-none gap-2 d-flex justify-content-center">
        <button onclick="window.print()" class="btn btn-dark rounded-pill px-4"><i class="fas fa-print me-2"></i> Print Invoice</button>
        <a href="{% url 'create_order' %}" class="btn btn-primary rounded-pill px-4"><i class="fas fa-plus me-2"></i> New Order</a>
        {% if request.user.is_authenticated %}
        <button onclick="window.history.back()" class="btn btn-outline-secondary rounded-pill px-4"><i class="fas fa-arrow-left me-2"></i> Back</button>
        {% endif %}
    </div>
</div>
<style>
    @media print {
        body * { visibility: hidden; }
        #invoiceCard, #invoiceCard * { visibility: visible; }
        #invoiceCard { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; }
        .navbar, .btn, footer { display: none !important; }
    }
</style>
{% endblock %}