{% load i18n static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <title>{% trans "Payment Receipt" %} #{{ sale.invoice_number|default:sale.id }}</title>
    <style>
        @media print {
            .no-print { display: none; }
            body { padding: 0; margin: 0; }
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            line-height: 1.6;
            padding: 40px;
            background-color: #f8f9fa;
        }
        .receipt-container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 40px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }
        .business-info h1 {
            margin: 0;
            color: #0d6efd;
            font-size: 28px;
        }
        .business-info p {
            margin: 5px 0;
            color: #666;
            font-size: 14px;
        }
        .receipt-title {
            text-align: right;
        }
        .receipt-title h2 {
            margin: 0;
            font-size: 24px;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .receipt-meta {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }
        .info-box h3 {
            font-size: 14px;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .info-box p {
            margin: 0;
            font-weight: 600;
        }
        .payment-details {
            background-color: #fcfcfc;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 40px;
        }
        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
        }
        .detail-row:last-child {
            border-bottom: none;
        }
        .label {
            color: #666;
        }
        .value {
            font-weight: 600;
        }
        .amount-box {
            background-color: #198754;
            color: #fff;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            margin-top: 20px;
        }
        .amount-box h4 {
            margin: 0;
            font-size: 14px;
            text-transform: uppercase;
            opacity: 0.8;
        }
        .amount-box .amount {
            font-size: 32px;
            font-weight: 700;
            margin-top: 5px;
        }
        .amount-in-words {
            text-align: center;
            margin-top: 15px;
            font-style: italic;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            color: #999;
            font-size: 12px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .btn-print {
            background: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .btn-print:hover { background: #000; }
        
        [dir="rtl"] .header, [dir="rtl"] .detail-row {
            flex-direction: row-reverse;
        }
        [dir="rtl"] .receipt-title {
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="no-print" style="text-align: center;">
        <button class="btn-print" onclick="window.print()">{% trans "Print Receipt" %}</button>
        <a href="{% url 'invoices' %}" class="btn-print" style="text-decoration: none; display: inline-block; background: #6c757d;">{% trans "Back to Invoices" %}</a>
    </div>

    <div class="receipt-container">
        <div class="header">
            <div class="business-info">
                {% if settings.logo %}
                    <img src="{{ settings.logo.url }}" alt="Logo" height="50" style="margin-bottom: 10px;">
                {% endif %}
                <h1>{{ settings.business_name }}</h1>
                <p>{{ settings.address|linebreaksbr }}</p>
                <p>{% trans "Phone" %}: {{ settings.phone }}</p>
                {% if settings.vat_number %}
                    <p>{% trans "VAT No" %}: {{ settings.vat_number }}</p>
                {% endif %}
            </div>
            <div class="receipt-title">
                <h2>{% trans "Payment Receipt" %}</h2>
                <div class="receipt-meta">
                    <p><strong>{% trans "Invoice #" %}:</strong> {{ sale.invoice_number|default:sale.id }}</p>
                    <p><strong>{% trans "Date" %}:</strong> {{ sale.created_at|date:"Y-m-d" }}</p>
                </div>
            </div>
        </div>

        <div class="info-grid">
            <div class="info-box">
                <h3>{% trans "Received From" %}</h3>
                <p>{{ sale.customer.name|default:"Guest" }}</p>
                {% if sale.customer.phone %}
                    <p class="text-muted" style="font-weight: normal; font-size: 14px;">{{ sale.customer.phone }}</p>
                {% endif %}
            </div>
            <div class="info-box">
                <h3>{% trans "Status" %}</h3>
                <p style="color: #198754; font-weight: bold; text-transform: uppercase;">{% trans "Paid In Full" %}</p>
                <p class="text-muted" style="font-weight: normal; font-size: 14px;">{% trans "Total Invoice" %}: {{ settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</p>
            </div>
        </div>

        <div class="payment-details">
            <div class="detail-row">
                <span class="label">{% trans "Payment Type" %}</span>
                <span class="value">{{ sale.get_payment_type_display }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{% trans "Transaction Status" %}</span>
                <span class="value" style="color: #198754;">{% trans "Settled" %}</span>
            </div>
            <div class="detail-row">
                <span class="label">{% trans "Sold By" %}</span>
                <span class="value">{{ sale.created_by.get_full_name|default:sale.created_by.username }}</span>
            </div>
            {% if sale.notes %}
            <div class="detail-row">
                <span class="label">{% trans "Notes" %}</span>
                <span class="value">{{ sale.notes }}</span>
            </div>
            {% endif %}
        </div>

        <div class="amount-box">
            <h4>{% trans "Total Amount Received" %}</h4>
            <div class="amount">{{ settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</div>
        </div>

        <div class="amount-in-words">
            <strong>{% trans "Amount in Words" %}:</strong> {{ amount_in_words }}
        </div>

        <div class="footer">
            <p>{% trans "Thank you for your business!" %}</p>
            <p>{{ settings.business_name }} &copy; {% now "Y" %}</p>
        </div>
    </div>
</body>
</html>