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

{% block title %}{% trans "Quotation" %} #{{ quotation.quotation_number|default:quotation.id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <!-- Company Info (Right in RTL) -->
        <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>
        <!-- Doc Info (Left in RTL) -->
        <div class="col-6 text-end">
            <h1 class="text-muted text-uppercase mb-3">{% trans "Quotation" %} / عرض سعر</h1>
            <div class="mb-2">
                <strong>{% trans "Quotation #" %} / رقم العرض:</strong> {{ quotation.quotation_number|default:quotation.id }}
            </div>
            <div class="mb-2">
                <strong>{% trans "Date" %} / التاريخ:</strong> {{ quotation.created_at|date:"Y-m-d" }}
            </div>
            <div class="mb-2">
                <strong>{% trans "Valid Until" %} / سارٍ حتى:</strong> {{ quotation.valid_until|date:"Y-m-d"|default:"-" }}
            </div>
        </div>
    </div>

    <!-- Customer & Status -->
    <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">{{ quotation.customer.name|default:"Guest" }}</h5>
            {% if quotation.customer.phone %}
                <div>{{ quotation.customer.phone }}</div>
            {% endif %}
            {% if quotation.customer.address %}
                <div>{{ quotation.customer.address }}</div>
            {% endif %}
        </div>
        <div class="col-6 text-end">
             <!-- Status badge text -->
             <span class="badge rounded-pill px-3 py-2">
                 {% if quotation.status == 'converted' %}{% trans "Converted" %} / محول لفاتورة
                 {% elif quotation.status == 'accepted' %}{% trans "Accepted" %} / مقبول
                 {% elif quotation.status == 'rejected' %}{% trans "Rejected" %} / مرفوض
                 {% else %}{% trans "Open" %} / مفتوح
                 {% endif %}
             </span>
        </div>
    </div>

    <!-- Table -->
    <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 quotation.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">{{ quotation.total_amount|add:quotation.discount|floatformat:3 }}</td>
            </tr>
            {% if quotation.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">-{{ quotation.discount|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">{{ quotation.total_amount|floatformat:3 }} {{ settings.currency_symbol }}</td>
            </tr>
        </tfoot>
    </table>

    <!-- Amount in Words -->
    {% 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 %}

    <!-- Terms -->
    {% if quotation.terms_and_conditions %}
    <div class="mb-4">
        <h6 class="text-uppercase text-muted fw-bold">{% trans "Terms & Conditions" %} / الشروط والأحكام</h6>
        <div class="small" style="white-space: pre-line;">{{ quotation.terms_and_conditions }}</div>
    </div>
    {% endif %}

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