{% extends "pdf/base_pdf.html" %}
{% load i18n %}

{% block title %}{% trans "Invoice" %} #{{ sale.invoice_number|default:sale.id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-6">
            {% if settings.logo %}
                <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-3">
            {% else %}
                <h3 class="text-primary fw-bold">{{ settings.business_name }}</h3>
            {% endif %}
            <div class="small text-muted">
                <div>{{ settings.address }}</div>
                <div>{{ settings.phone }}</div>
                <div>{{ settings.email }}</div>
                {% if settings.vat_number %}
                    <div>{% trans "VAT" %}: {{ settings.vat_number }}</div>
                {% endif %}
            </div>
        </div>
        <div class="col-6 text-end">
            <h1 class="text-muted text-uppercase mb-3">{% trans "Tax Invoice" %} / فاتورة ضريبية</h1>
            <div class="mb-2"><strong>{% trans "Invoice #" %} / رقم الفاتورة:</strong> {{ sale.invoice_number|default:sale.id }}</div>
            <div class="mb-2"><strong>{% trans "Date" %} / التاريخ:</strong> {{ sale.created_at|date:"Y-m-d H:i" }}</div>
        </div>
    </div>

    <div class="row mb-4 border-top border-bottom py-3">
        <div class="col-6">
            <h6 class="text-uppercase text-muted fw-bold">{% trans "Bill To" %} / العميل</h6>
            <h5 class="fw-bold">{{ sale.customer.name|default:"Guest" }}</h5>
            {% if sale.customer.phone %}<div>{{ sale.customer.phone }}</div>{% endif %}
            {% if sale.customer.address %}<div>{{ sale.customer.address }}</div>{% endif %}
        </div>
        <div class="col-6 text-end">
            <span class="badge rounded-pill px-3 py-2">{{ sale.get_status_display }}</span>
        </div>
    </div>

    <table class="table table-striped table-sm">
        <thead>
            <tr class="table-light">
                <th style="width: 40%">{% trans "Item" %} / الصنف</th>
                <th class="text-center">{% trans "Price" %} / السعر</th>
                <th class="text-center">{% trans "Qty" %} / الكمية</th>
                <th class="text-end">{% trans "Total" %} / المجموع</th>
            </tr>
        </thead>
        <tbody>
            {% for item in sale.items.all %}
            <tr>
                <td>
                    <div class="fw-bold">{{ item.product.name_ar }}</div>
                    <div class="small text-muted">{{ item.product.name_en }}</div>
                </td>
                <td class="text-center">{{ item.unit_price|floatformat:3 }}</td>
                <td class="text-center">{{ item.quantity|floatformat:2 }}</td>
                <td class="text-end">{{ item.line_total|floatformat:3 }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"></td>
                <td class="text-center fw-bold">{% trans "Subtotal" %} / المجموع الفرعي</td>
                <td class="text-end fw-bold">{{ sale.subtotal|floatformat:3 }}</td>
            </tr>
            {% if sale.discount > 0 %}
            <tr>
                <td colspan="2"></td>
                <td class="text-center fw-bold text-danger">{% trans "Discount" %} / الخصم</td>
                <td class="text-end fw-bold text-danger">-{{ sale.discount|floatformat:3 }}</td>
            </tr>
            {% endif %}
            {% if sale.vat_amount > 0 %}
            <tr>
                <td colspan="2"></td>
                <td class="text-center fw-bold">{% trans "VAT" %} / الضريبة</td>
                <td class="text-end fw-bold">{{ sale.vat_amount|floatformat:3 }}</td>
            </tr>
            {% endif %}
            <tr class="bg-light">
                <td colspan="2"></td>
                <td class="text-center fw-bold h6">{% trans "Total" %} / الإجمالي</td>
                <td class="text-end fw-bold h6">{{ sale.total_amount|floatformat:3 }} {{ settings.currency_symbol }}</td>
            </tr>
             <tr>
                <td colspan="2"></td>
                <td class="text-center fw-bold">{% trans "Paid" %} / المدفوع</td>
                <td class="text-end fw-bold">{{ sale.paid_amount|floatformat:3 }}</td>
            </tr>
        </tfoot>
    </table>

    {% if amount_in_words %}
    <div class="mb-4 p-2 bg-light rounded border">
        <strong>{% trans "Amount in Words" %} / المبلغ بالحروف:</strong> {{ amount_in_words }}
    </div>
    {% endif %}
    
    <div class="text-center text-muted small mt-5 pt-3 border-top">
        {% trans "Generated by" %} {{ settings.business_name }}
    </div>
</div>
{% endblock %}