{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Receipt - {{ order.order_number }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Poppins Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <style>
        :root {
            --sp-primary: #4F46E5;
            --sp-text-main: #111827;
            --sp-text-muted: #6B7280;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 18px;
            font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background: #E5E7EB;
            font-size: 10px;
            color: var(--sp-text-main);
        }

        .receipt-wrapper {
            max-width: 480px;
            margin: 0 auto;
        }

        .receipt {
            background: #ffffff;
            border-radius: 8px;
            padding: 16px 14px 12px;
            box-shadow: 0 0 14px rgba(15,23,42,0.15);
            position: relative;
            overflow: hidden;
            page-break-inside: avoid;
        }

        /* Watermark: many repeated order numbers in background */
        .receipt::before {
            content:
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}\A"
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}\A"
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}\A"
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}\A"
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}\A"
                "{{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }} {{ order.order_number }}";
            position: absolute;
            inset: -16px;
            font-size: 18px;
            line-height: 1.5;
            white-space: pre-wrap;
            color: rgba(148,163,184,0.09);
            transform: rotate(-25deg);
            pointer-events: none;
            z-index: 0;
        }

        .receipt-inner {
            position: relative;
            z-index: 1;
        }

        /* Header */
        .header {
            text-align: center;
            padding-bottom: 4px;
            border-bottom: 1px dashed #CBD5F5;
            margin-bottom: 4px;
        }

        .header h1 {
            margin: 0;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .header p {
            margin: 1px 0;
            font-size: 9px;
            color: var(--sp-text-muted);
        }

        /* Order + seal row */
        .order-header-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 6px;
            margin: 4px 0 6px;
        }

        @media (max-width: 480px) {
            .order-header-row {
                flex-direction: column;
                align-items: stretch;
            }
        }

        /* Order info (left) */
        .order-info {
            font-size: 9px;
        }

        .order-info-block {
            margin-bottom: 2px;
        }

        .order-info-title {
            font-weight: 500;
        }

        /* QR at bottom — centered, compact */
        .qr-bottom {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px dashed #E5E7EB;
            text-align: center;
        }
        .qr-bottom img {
            width: 60px;
            height: 60px;
            display: inline-block;
        }
        .qr-bottom .small {
            font-size: 8px;
            color: var(--sp-text-muted);
            margin-top: 2px;
        }

        /* Section title */
        .section-title {
            font-size: 9px;
            font-weight: 600;
            margin: 6px 0 3px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--sp-text-muted);
            text-align: center;
        }

        /* Items table */
        .items {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
            page-break-inside: avoid;
        }

        .items thead th {
            text-align: left;
            font-weight: 500;
            padding: 3px 0;
            border-bottom: 1px solid #E5E7EB;
        }

        .items tbody td {
            padding: 3px 0;
            border-bottom: 1px dashed #E5E7EB;
        }

        .items tbody tr:last-child td {
            border-bottom: none;
        }

        .text-right {
            text-align: right;
        }

        /* Totals */
        .totals {
            margin-top: 6px;
            padding-top: 4px;
            border-top: 1px solid #E5E7EB;
            font-size: 9px;
            page-break-inside: avoid;
        }

        .total-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
        }

        .total-line strong {
            font-size: 10px;
        }

        /* QR at bottom */
        /*.qr-bottom {
            margin-top: 6px;
            padding-top: 4px;
            border-top: 1px dashed #E5E7EB;
            text-align: center;
            align-items: center !important;
            page-break-inside: avoid;
        }

        .qr-bottom img {
            margin-top: 3px;
            width: 70px;
            height: 70px;
        }

        .qr-bottom .small {
            font-size: 8px;
            color: var(--sp-text-muted);
        }*/

        /* Footer */
        .footer {
            text-align: center;
            font-size: 8.5px;
            margin-top: 6px;
            color: var(--sp-text-muted);
            page-break-inside: avoid;
        }

        .footer p {
            margin: 1px 0;
        }

        @media print {
            @page {
                size: 80mm auto; /* 80mm thermal printer roll */
                margin: 4mm 2mm;
            }
            body {
                background: #ffffff;
                padding: 0;
            }
            .receipt-wrapper {
                max-width: 100%;
            }
            .receipt {
                margin: 0;
                box-shadow: none;
                border-radius: 0;
            }
        }

    </style>
</head>
<body>

<div class="receipt-wrapper">
    <div class="receipt" data-order="{{ order.order_number }}">
        <div class="receipt-inner">

            <!-- Header -->
            <div class="header">
                <h1>{{ system_settings.business_name|default:"SWIFTPOS" }}</h1>
                {% if system_settings.business_address %}
                    <p>{{ system_settings.business_address }}</p>
                {% endif %}
                {% if system_settings.business_phone %}
                    <p>{{ system_settings.business_phone }}</p>
                {% endif %}
            </div>

            <!-- Order + Seal row -->
            <div class="order-header-row">
                <!-- Left: order info -->
                <div class="order-info">
                            <div class="order-info-block">
                    <span class="order-info-title">Order No:</span> 
                    {{ order.order_number }}
                </div>
                <div class="order-info-block">
                    <span class="order-info-title">Date:</span> {{ order.created_at|date:"Y-m-d H:i" }}
                </div>

                {# NEW: Payment Status #}
                {% if order.payment_status %}
                    <div class="order-info-block">
                        <span class="order-info-title">Payment Status:</span>
                        {{ order.get_payment_status_display|default:"-" }}
                    </div>
                {% endif %}

                {% if order.cashier %}
                    <div class="order-info-block">
                        <span class="order-info-title">Cashier:</span> {{ order.cashier }}
                    </div>
                {% endif %}

                    {% if order.customer_name %}
                        <div class="order-info-block">
                            <span class="order-info-title">Customer:</span>
                            {{ order.customer_name }}
                            {% if order.customer_id %}
                            <a href="{% url 'sales:customer_list' %}?q={{ order.customer_name|urlencode }}" class="ms-1 badge bg-primary text-white text-decoration-none" style="font-size:10px;">
                                View Profile
                            </a>
                            {% endif %}
                        </div>
                        {% if order.balance_amount > 0 %}
                        <div class="order-info-block text-danger fw-semibold">
                            <span class="order-info-title">Balance Owed:</span> {{ currency_symbol }}{{ order.balance_amount }}
                        </div>
                        {% endif %}
                    {% endif %}
                    {% if order.customer_phone %}
                        <div class="order-info-block">
                            <span class="order-info-title">Phone:</span> {{ order.customer_phone }}
                        </div>
                    {% endif %}
                </div>

                <!-- Right: digital seal -->
                
            </div>

            <!-- Items -->
            <div class="section-title">Items</div>
            <table class="items">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th class="text-right">Qty</th>
                        <th class="text-right">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in order_items %}
                        <tr>
                            <td>{{ item.product.name }}</td>
                            <td class="text-right">{{ item.quantity }}</td>
                            <td class="text-right">{{ currency_symbol }}{{ item.total_price }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- Totals -->
            <div class="totals">
                <div class="total-line">
                    <span>Subtotal:</span>
                    <span>{{ currency_symbol }}{{ order.total_amount }}</span>
                </div>
                <div class="total-line">
                    <span>Tax:</span>
                    <span>{{ currency_symbol }}{{ order.tax_amount }}</span>
                </div>
                <div class="total-line">
                    <strong>Total:</strong>
                    <strong>{{ currency_symbol }}{{ order.final_amount }}</strong>
                </div>
                <div class="total-line">
                    <span>Payment:</span>
                    <span>{{ order.get_payment_method_display }}</span>
                </div>
                {% if order.amount_paid %}
                    <div class="total-line">
                        <span>Amount Paid:</span>
                        <span>{{ currency_symbol }}{{ order.amount_paid }}</span>
                    </div>
                {% endif %}
                {% if order.balance_amount %}
                    <div class="total-line">
                        <span>Balance:</span>
                        <span>{{ currency_symbol }}{{ order.balance_amount }}</span>
                    </div>
                {% endif %}
            </div>

            {% if qr_code %}
            <div class="qr-bottom">
                <img src="data:image/png;base64,{{ qr_code }}" alt="QR Code">
                <!-- <div class="small">Scan to verify</div> -->
            </div>
            {% endif %}


            <!-- Footer -->
            <div class="footer">
                {% if system_settings.receipt_footer %}
                    <p>{{ system_settings.receipt_footer }}</p>
                {% else %}
                    <p>Thank you for your business!</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
    // JS verification code (deterministic from order data)
    function generateVerificationCode() {
        const orderNumber = "{{ order.order_number }}";
        const createdAt = "{{ order.created_at|date:'YmdHis' }}";
        const business = "{{ system_settings.business_name|default:''|escapejs }}";

        const raw = orderNumber + "|" + createdAt + "|" + business;

        let hash = 0 >>> 0;
        for (let i = 0; i < raw.length; i++) {
            hash = (hash * 31 + raw.charCodeAt(i)) >>> 0;
        }

        let code = hash.toString(36).toUpperCase();
        if (code.length < 8) code = code.padStart(8, "0");
        code = code.slice(-8);
        return "SP-" + code.slice(0, 4) + "-" + code.slice(4);
    }

    document.addEventListener("DOMContentLoaded", function () {
        const el = document.getElementById("verification-code");
        if (el) {
            el.textContent = generateVerificationCode();
        }

        // Slight delay to ensure everything is rendered before print
        setTimeout(function () {
            window.print();
        }, 100);
    });
</script>

</body>
</html>