{% extends "base.html" %}

{% block content %}

<style>

/* ============ 80mm THERMAL RECEIPT STYLE ============ */

.receipt-wrap{
    display:flex;
    justify-content:center;
    padding:16px 0;
}

.receipt{
    width:76mm;
    max-width:76mm;
    background:#fff;
    padding:8px 10px;
    font-family: 'Courier New', Consolas, monospace;
    font-size:12px;
    color:#000;
    box-shadow:0 0 8px rgba(0,0,0,.15);
}

.receipt hr{
    border:none;
    border-top:1px dashed #000;
    margin:6px 0;
}

.r-center{ text-align:center; }
.r-shop-name{ font-size:15px; font-weight:700; margin:0; }
.r-shop-info{ font-size:10.5px; line-height:1.4; }

.r-meta{ font-size:11px; display:flex; justify-content:space-between; }

.r-table{ width:100%; border-collapse:collapse; font-size:11px; }
.r-table th{
    text-align:left;
    border-bottom:1px dashed #000;
    padding:3px 0;
    font-size:10.5px;
}
.r-table td{ padding:3px 0; vertical-align:top; }
.r-table th:nth-child(2), .r-table td:nth-child(2){ text-align:center; }
.r-table th:nth-child(3), .r-table td:nth-child(3),
.r-table th:nth-child(4), .r-table td:nth-child(4){ text-align:right; }

.r-item-name{ word-break:break-word; }

.r-totals{ font-size:11.5px; }
.r-totals .row-line{ display:flex; justify-content:space-between; margin:2px 0; }
.r-grand{ font-size:14px; font-weight:700; border-top:1px dashed #000; border-bottom:1px dashed #000; padding:4px 0; margin:5px 0; }
.r-due{ color:#000; font-weight:700; }

.r-footer{ text-align:center; font-size:11px; margin-top:8px; line-height:1.5; }

.no-print{ text-align:center; margin-top:14px; }

/* ============ PRINT: force real 80mm paper ============ */
@media print {
    /* The POS layout must never be part of a receipt print. */
    .sidebar, .topbar, .mobile-bottom-nav, .alert-wrap, nav, .btn, .no-print { display:none !important; }

    @page { size: 80mm auto; margin: 0 !important; }

    html, body, .main-wrap, .content {
        width:80mm !important;
        min-width:80mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }
    .main-wrap { min-height:0 !important; }
    .receipt-wrap{
        display:block !important;
        width:80mm !important;
        margin:0 !important;
        padding:0 !important;
    }
    .receipt{
        box-sizing:border-box !important;
        width:80mm !important;
        max-width:80mm !important;
        margin:0 !important;
        box-shadow:none !important;
        padding:1.5mm 2mm !important;
    }
}

</style>

<div class="receipt-wrap">
<div class="receipt">

    <!-- Shop Header -->
    <div class="r-center">
        <p class="r-shop-name">{{ shop.shop_name }}</p>
        <div class="r-shop-info">
            {% if shop.address and shop.address != "None" %}{{ shop.address }}<br>{% endif %}
            {% if shop.phone and shop.phone != "None" %}Phone: {{ shop.phone }}{% endif %}
        </div>
    </div>

    <hr>

    <div class="r-meta">
        <span>Inv: {{ invoice.invoice_no }}</span>
        <span>{{ invoice.created_at.strftime("%d-%m-%y %I:%M%p") }}</span>
    </div>

    {% if invoice.customer %}
    <div class="r-meta">
        <span>{{ invoice.customer.name }}</span>
        <span>{{ invoice.customer.phone or '' }}</span>
    </div>
    {% else %}
    <div class="r-meta"><span>Walk-in Customer</span></div>
    {% endif %}

    <hr>

    <!-- Items -->
    <table class="r-table">
        <thead>
            <tr>
                <th>Item</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for item in invoice.items %}
            <tr>
                <td class="r-item-name">
                    {% if item.product %}{{ item.product.name }}{% else %}Deleted Product{% endif %}
                </td>
                <td>{% set q = item.quantity or 0 %}{{ q|int if q == q|int else "%.2f"|format(q) }}</td>
                <td>{{ "%.2f"|format(item.price) }}</td>
                <td>{{ "%.2f"|format(item.total) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <hr>

    <!-- Totals -->
    <div class="r-totals">

        <div class="row-line">
            <span>Subtotal</span>
            <span>৳ {{ "%.2f"|format(invoice.subtotal or invoice.total_amount) }}</span>
        </div>

        {% if invoice.discount_amount %}
        <div class="row-line">
            <span>Discount{% if invoice.coupon_code %} ({{ invoice.coupon_code }}){% endif %}</span>
            <span>- ৳ {{ "%.2f"|format(invoice.discount_amount) }}</span>
        </div>
        {% endif %}

        <div class="row-line r-grand">
            <span>Grand Total</span>
            <span>৳ {{ "%.2f"|format(invoice.total_amount) }}</span>
        </div>

        {% if invoice.received_amount and invoice.received_amount > 0 %}
        <div class="row-line">
            <span>Received</span>
            <span>৳ {{ "%.2f"|format(invoice.received_amount) }}</span>
        </div>
        {% if invoice.change_amount and invoice.change_amount > 0 %}
        <div class="row-line" style="font-weight:700;">
            <span>Change Return</span>
            <span>৳ {{ "%.2f"|format(invoice.change_amount) }}</span>
        </div>
        {% endif %}
        {% endif %}

        <div class="row-line">
            <span>Paid ({{ invoice.payment_method }})</span>
            <span>৳ {{ "%.2f"|format(invoice.paid_amount or 0) }}</span>
        </div>

        {% if invoice.due_amount and invoice.due_amount > 0 %}
        <div class="row-line r-due">
            <span>Due</span>
            <span>৳ {{ "%.2f"|format(invoice.due_amount) }}</span>
        </div>
        {% endif %}

    </div>

    <hr>

    <div class="r-footer">
        Thank You For Shopping<br>
        Please Visit Again
    </div>

</div>
</div>

<!-- Premium Single Action Bar (hidden on print) -->
<div class="no-print d-flex justify-content-center align-items-center gap-2 mt-3 mb-4">
    <button onclick="history.back()" class="btn btn-outline-secondary fw-semibold px-3 shadow-sm">
        <i class="bi bi-arrow-left me-1"></i> {{ l('Back', 'ব্যাক') }}
    </button>

    <button class="btn btn-success fw-bold px-4 shadow-sm" onclick="window.print()">
        <i class="bi bi-printer me-1"></i> {{ l('Print Invoice', 'ইনভয়েস প্রিন্ট') }}
    </button>

    <a href="/invoice/{{ invoice.id }}/pdf" class="btn btn-danger fw-bold px-3 shadow-sm">
        <i class="bi bi-file-earmark-pdf me-1"></i> {{ l('Download PDF', 'পিডিএফ ডাউনলোড') }}
    </a>

    <a href="{{ url_for('return_invoice', id=invoice.id) }}" class="btn btn-secondary fw-semibold">
        {{ l('Return Items', 'পণ্য ফেরত') }}
    </a>

    {% if invoice.customer and invoice.due_amount and invoice.due_amount > 0 %}
    <a href="{{ url_for('customer_ledger', id=invoice.customer.id) }}" class="btn btn-warning fw-semibold">
        {{ l('Collect Due', 'বাকি আদায়') }}
    </a>
    {% endif %}
</div>

{% endblock %}