{% extends 'base.html' %}
{% load static %}

{% block title %}Receipt {{ receipt.receipt_number }} - Ghana Wholesale{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h3 mb-0">Receipt: {{ receipt.receipt_number }}</h1>
            <p class="text-muted">Sale Invoice: {{ sale.invoice_number }}</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" onclick="window.print()">
                <i class="fas fa-print"></i> Print Receipt
            </button>
            <a href="{% url 'sale_detail' sale.pk %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Back to Sale
            </a>
        </div>
    </div>

    <!-- Receipt for Printing -->
    <div class="receipt-container bg-white p-4 border rounded shadow-sm" id="receiptContent">
        <!-- Company Header -->
        <div class="text-center mb-4 border-bottom pb-3">
            <h2 class="mb-1">{{ receipt.company_name }}</h2>
            <p class="mb-1 text-muted">{{ receipt.company_address }}</p>
            <p class="mb-1 text-muted">Phone: {{ receipt.company_phone }}</p>
            {% if receipt.vat_number %}
            <p class="mb-1 text-muted">VAT No: {{ receipt.vat_number }}</p>
            {% endif %}
        </div>
        
        <!-- Sale Info -->
        <div class="row mb-3">
            <div class="col-6">
                <p class="mb-1"><strong>Receipt No:</strong> {{ receipt.receipt_number }}</p>
                <p class="mb-1"><strong>Invoice No:</strong> {{ sale.invoice_number }}</p>
                <p class="mb-1"><strong>Date:</strong> {{ sale.created_at|date:"d/m/Y H:i" }}</p>
            </div>
            <div class="col-6 text-end">
                <p class="mb-1"><strong>Cashier:</strong> {{ sale.cashier.get_full_name|default:sale.cashier.username }}</p>
                <p class="mb-1"><strong>Shop:</strong> {{ sale.shop.name }}</p>
                {% if sale.customer %}
                <p class="mb-1"><strong>Customer:</strong> {{ sale.customer.name }}</p>
                {% endif %}
            </div>
        </div>
        
        <!-- Items Table -->
        <table class="table table-sm table-bordered mb-3">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Product</th>
                    <th class="text-end">Qty</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody>
                {% for item in sale.items.all %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.product.name }}</td>
                    <td class="text-end">{{ item.quantity }} {{ item.product.unit }}</td>
                    <td class="text-end">GH₵{{ item.unit_price|floatformat:2 }}</td>
                    <td class="text-end">GH₵{{ item.total_price|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        <!-- Payment Summary -->
        <div class="row justify-content-end">
            <div class="col-md-6 col-lg-4">
                <table class="table table-sm table-borderless">
                    <tr>
                        <td>Subtotal:</td>
                        <td class="text-end">GH₵{{ sale.subtotal|floatformat:2 }}</td>
                    </tr>
                    {% if sale.discount_percentage > 0 or sale.discount_amount > 0 %}
                    <tr>
                        <td>Discount:</td>
                        <td class="text-end text-danger">- GH₵{% widthratio sale.discount_amount 1 1 %}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td>VAT (15%):</td>
                        <td class="text-end">GH₵{{ sale.tax_amount|floatformat:2 }}</td>
                    </tr>
                    <tr class="border-top">
                        <td><strong>Total:</strong></td>
                        <td class="text-end"><strong>GH₵{{ sale.total_amount|floatformat:2 }}</strong></td>
                    </tr>
                    <tr>
                        <td>Amount Paid:</td>
                        <td class="text-end">GH₵{{ sale.amount_paid|floatformat:2 }}</td>
                    </tr>
                    {% if sale.balance > 0 %}
                    <tr class="text-danger">
                        <td>Balance Due:</td>
                        <td class="text-end">GH₵{{ sale.balance|floatformat:2 }}</td>
                    </tr>
                    {% else %}
                    <tr class="text-success">
                        <td>Balance:</td>
                        <td class="text-end">GH₵0.00</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
        
        <!-- Payment Method -->
        <div class="mb-3">
            <p class="mb-1"><strong>Payment Method:</strong> {{ sale.get_payment_method_display }}</p>
            {% if sale.payment_method == 'mobile_money' and sale.mobile_money_number %}
            <p class="mb-1"><strong>Mobile Money No:</strong> {{ sale.mobile_money_number }}</p>
            {% endif %}
        </div>
        
        <!-- Footer -->
        <div class="text-center border-top pt-3 mt-4">
            <p class="mb-2"><strong>{{ receipt.footer_message }}</strong></p>
            <p class="text-muted small mb-0">
                Printed on {{ receipt.printed_at|date:"d/m/Y H:i" }} by {{ receipt.printed_by.get_full_name|default:receipt.printed_by.username }}
            </p>
            <p class="text-muted small mb-0">Thank you for your business!</p>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row mt-4">
        <div class="col">
            <div class="d-flex gap-2">
                <button class="btn btn-primary" onclick="window.print()">
                    <i class="fas fa-print"></i> Print Receipt
                </button>
                <a href="{% url 'sale_detail' sale.pk %}" class="btn btn-outline-secondary">
                    <i class="fas fa-eye"></i> View Sale Details
                </a>
                <a href="{% url 'pos_dashboard' %}" class="btn btn-outline-success">
                    <i class="fas fa-bolt"></i> POS Dashboard
                </a>
                {% if sale.status == 'completed' %}
                <a href="{% url 'void_sale' sale.pk %}" class="btn btn-outline-danger">
                    <i class="fas fa-ban"></i> Void Sale
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .receipt-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12pt;
    }
    
    .btn, .col-auto, .row.mt-4, .row.mb-4 {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    table {
        font-size: 11pt !important;
    }
}

.receipt-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Courier New', monospace;
}

.table-sm th, .table-sm td {
    padding: 4px 8px;
}
</style>

<script>
// Auto-print option (optional)
window.onload = function() {
    // Uncomment to auto-print on page load
    // window.print();
};
</script>
{% endblock %}