{% extends "base.html" %}

{% block content %}

<style>
/* ============ 80mm THERMAL RECEIPT STYLE (MATCHING INVOICE.HTML) ============ */

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

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

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

.r-center{ text-align:center; }
.r-shop-name{ font-size:16px; font-weight:700; margin:0 0 2px 0; }
.r-shop-info{ font-size:11px; line-height:1.4; color:#333; }

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

.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:11px;
}
.r-table td{ padding:4px 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:16px; }

/* ============ PRINT: force real 80mm paper ============ */
@media 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 if shop else 'Shop Manager POS' }}</p>
        <div class="r-shop-info">
            {{ shop.address if shop and shop.address else 'None' }}<br>
            Phone: {{ shop.phone if shop and shop.phone else 'None' }}
        </div>
    </div>

    <hr>

    <div class="r-meta">
        <span>Inv: REC-{{ "%05d" | format(p.id) }}</span>
        <span>{{ p.created_at.strftime("%d-%m-%y %I:%M%p") if p.created_at else '' }}</span>
    </div>

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

    <hr>

    <!-- Items / Description Table -->
    <table class="r-table">
        <thead>
            <tr>
                <th>Item</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="r-item-name">Due Collection Payment</td>
                <td>1</td>
                <td>{{ "%.2f"|format(p.amount or 0) }}</td>
                <td>{{ "%.2f"|format(p.amount or 0) }}</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <!-- Totals -->
    <div class="r-totals">
        <div class="row-line">
            <span>Subtotal</span>
            <span>৳ {{ "%.2f"|format(p.amount or 0) }}</span>
        </div>

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

        <div class="row-line">
            <span>Paid ({{ p.method or 'Cash' }})</span>
            <span>৳ {{ "%.2f"|format(p.amount or 0) }}</span>
        </div>

        <div class="row-line r-due">
            <span>Remaining Due</span>
            <span>৳ {{ "%.2f"|format(total_due or 0) }}</span>
        </div>
    </div>

    <hr>

    <div class="r-footer">
        Thank You For Payment<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="/due-receipt/{{ p.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>
</div>

{% endblock %}