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

{% block title %}{% trans "Purchase Order" %} #{{ lpo.lpo_number|default:lpo.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>
            </div>
        </div>
        <div class="col-6 text-end">
            <h1 class="text-muted text-uppercase mb-3">{% trans "Purchase Order" %} / طلب شراء</h1>
            <div class="mb-2"><strong>{% trans "LPO #" %} / رقم الطلب:</strong> {{ lpo.lpo_number|default:lpo.id }}</div>
            <div class="mb-2"><strong>{% trans "Date" %} / التاريخ:</strong> {{ lpo.created_at|date:"Y-m-d" }}</div>
            <div class="mb-2"><strong>{% trans "Expected" %} / المتوقع:</strong> {{ lpo.expected_date|date:"Y-m-d"|default:"-" }}</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 "Vendor" %} / المورد</h6>
            <h5 class="fw-bold">{{ lpo.supplier.name }}</h5>
            {% if lpo.supplier.phone %}<div>{{ lpo.supplier.phone }}</div>{% endif %}
        </div>
        <div class="col-6 text-end">
            <span class="badge rounded-pill px-3 py-2">{{ lpo.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 "Cost" %} / التكلفة</th>
                <th class="text-center">{% trans "Qty" %} / الكمية</th>
                <th class="text-end">{% trans "Total" %} / المجموع</th>
            </tr>
        </thead>
        <tbody>
            {% for item in lpo.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.cost_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 class="bg-light">
                <td colspan="2"></td>
                <td class="text-center fw-bold h6">{% trans "Total" %} / الإجمالي</td>
                <td class="text-end fw-bold h6">{{ lpo.total_amount|floatformat:3 }} {{ settings.currency_symbol }}</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 %}

    {% if lpo.notes %}
    <div class="mb-4">
        <h6 class="text-uppercase text-muted fw-bold">{% trans "Notes" %} / ملاحظات</h6>
        <div class="small">{{ lpo.notes }}</div>
    </div>
    {% endif %}

    <div class="text-center text-muted small mt-5 pt-3 border-top">
        {% trans "Generated by" %} {{ settings.business_name }}
    </div>
</div>
{% endblock %}