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

{% block title %}Receipt - #{{ sale.invoice_number }}{% endblock %}

{% block extra_css %}
<style>
    .receipt-container {
        max-width: 80mm;
        margin: 0 auto;
        font-family: 'Courier New', monospace;
        padding: 10px;
        background-color: white;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .receipt-header {
        text-align: center;
        border-bottom: 1px dashed #000;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .receipt-logo {
        max-width: 100px;
        max-height: 80px;
        margin: 0 auto 10px;
        display: block;
    }
    .receipt-title {
        font-size: 16px;
        font-weight: bold;
        margin: 10px 0;
    }
    .receipt-info {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .receipt-items {
        border-bottom: 1px dashed #000;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .receipt-item {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .receipt-item-row {
        display: flex;
        justify-content: space-between;
    }
    .receipt-subtotal {
        font-size: 12px;
        text-align: right;
        padding: 5px 0;
    }
    .receipt-total {
        font-size: 14px;
        font-weight: bold;
        text-align: right;
        padding: 5px 0;
    }
    .receipt-payment {
        font-size: 12px;
        border-bottom: 1px dashed #000;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .receipt-footer {
        font-size: 12px;
        text-align: center;
    }
    .receipt-date {
        font-size: 12px;
        margin: 10px 0;
    }
    .print-btn {
        margin: 20px auto;
        display: block;
    }
    @media print {
        body * {
            visibility: hidden;
        }
        .receipt-container, .receipt-container * {
            visibility: visible;
        }
        .receipt-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 80mm;
            box-shadow: none;
        }
        .print-btn {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary print-btn" onclick="window.print()">
                <i class="fas fa-print"></i> Print Receipt
            </button>
            
            <div class="receipt-container">
                <div class="receipt-header">
                    {% if company_settings.logo %}
                    <img src="{{ company_settings.logo.url }}" alt="{{ company_settings.company_name }}" class="receipt-logo">
                    {% endif %}
                    <div class="receipt-title">{{ company_settings.company_name }}</div>
                    <div class="receipt-info">{{ company_settings.company_address }}</div>
                    <div class="receipt-info">Phone: {{ company_settings.contact_phone }}</div>
                    <div class="receipt-info">Email: {{ company_settings.contact_email }}</div>
                    <div class="receipt-info">--------------------------------------</div>
                    <div class="receipt-info">RECEIPT/INVOICE</div>
                    <div class="receipt-info">#{{ sale.invoice_number }}</div>
                    <div class="receipt-date">{{ sale.created_at|date:"d/m/Y H:i" }}</div>
                </div>
                
                <div class="receipt-customer">
                    {% if sale.customer %}
                    <div class="receipt-info"><strong>Customer:</strong> {{ sale.customer.full_name }}</div>
                    {% if sale.customer.phone %}
                    <div class="receipt-info"><strong>Phone:</strong> {{ sale.customer.phone }}</div>
                    {% endif %}
                    {% if sale.customer.email %}
                    <div class="receipt-info"><strong>Email:</strong> {{ sale.customer.email }}</div>
                    {% endif %}
                    {% else %}
                    <div class="receipt-info"><strong>Customer:</strong> Walk-in Customer</div>
                    {% endif %}
                    <div class="receipt-info"><strong>Cashier:</strong> {{ sale.cashier.get_full_name }}</div>
                    <div class="receipt-info"><strong>Branch:</strong> {{ sale.branch.name }}</div>
                    <div class="receipt-info">--------------------------------------</div>
                </div>
                
                <div class="receipt-items">
                    <div class="receipt-info">ITEMS</div>
                    {% for item in items %}
                    <div class="receipt-item">
                        <div>{{ item.product.name }}</div>
                        <div class="receipt-item-row">
                            <span>{{ item.quantity }} x {{ item.price|floatformat:2 }}</span>
                            <span>{{ item.total|floatformat:2 }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <div class="receipt-subtotal">
                    <div>Subtotal: {{ company_settings.currency_symbol }}{{ sale.subtotal|floatformat:2 }}</div>
                    {% if sale.tax_amount > 0 %}
                    <div>VAT ({{ company_settings.tax_rate }}%): {{ company_settings.currency_symbol }}{{ sale.tax_amount|floatformat:2 }}</div>
                    {% endif %}
                    {% if sale.discount_amount > 0 %}
                    <div>Discount: {{ company_settings.currency_symbol }}{{ sale.discount_amount|floatformat:2 }}</div>
                    {% endif %}
                </div>
                
                <div class="receipt-total">
                    <div>TOTAL: {{ company_settings.currency_symbol }}{{ sale.total_amount|floatformat:2 }}</div>
                </div>
                
                <div class="receipt-payment">
                    <div class="receipt-info">PAYMENT DETAILS</div>
                    {% for payment in payments %}
                    <div class="receipt-item-row">
                        <span>{{ payment.get_payment_method_display }} {% if payment.reference_number %}({{ payment.reference_number }}){% endif %}</span>
                        <span>{{ company_settings.currency_symbol }}{{ payment.amount|floatformat:2 }}</span>
                    </div>
                    {% endfor %}
                    
                    <div class="receipt-item-row" style="margin-top: 5px;">
                        <span>Amount Paid:</span>
                        <span>{{ company_settings.currency_symbol }}{{ sale.total_paid|floatformat:2 }}</span>
                    </div>
                    
                    {% if sale.balance_due > 0 %}
                    <div class="receipt-item-row">
                        <span>Balance Due:</span>
                        <span>{{ company_settings.currency_symbol }}{{ sale.balance_due|floatformat:2 }}</span>
                    </div>
                    {% endif %}
                </div>
                
                <div class="receipt-footer">
                    <div>{{ company_settings.receipt_footer }}</div>
                    <div class="receipt-info">--------------------------------------</div>
                    <div>Thank you for your business!</div>
                    <div>Welcome Again!</div>
                </div>
            </div>
            
            <div class="mt-4">
                <a href="{% url 'sale_detail' sale.id %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Sale
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto print when page loads if URL has print parameter
    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.search.includes('print=true')) {
            window.print();
        }
    });
</script>
{% endblock %}