{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>{% trans "Invoice" %} {{ parcel.tracking_number }}</title>
    <style>
        @page {
            size: A4;
            margin: 2cm;
        }
        body {
            /* Prioritize Noto Sans for Arabic support */
            font-family: 'Noto Sans', 'Noto Sans Arabic', 'DejaVu Sans', sans-serif;
            font-size: 14px;
            color: #333;
            line-height: 1.4;
        }
        .header {
            width: 100%;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }
        .logo-section {
            width: 40%;
        }
        .company-info {
            width: 50%;
            text-align: right;
            font-size: 12px;
        }
        .title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            text-transform: uppercase;
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #eee;
        }
        .title span.ar { display: block; font-size: 18px; font-weight: normal; margin-top: 5px; }
        
        .details-grid {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .details-col {
            width: 48%;
            background: #fdfdfd;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .label {
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
            font-size: 11px;
            text-transform: uppercase;
            border-bottom: 1px solid #ddd;
            padding-bottom: 2px;
            display: flex;
            justify-content: space-between;
        }
        .value {
            margin-bottom: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        th, td {
            padding: 12px;
            border-bottom: 1px solid #eee;
            text-align: left;
        }
        th {
            background-color: #f5f5f5;
            font-weight: bold;
            font-size: 12px;
        }
        th span.ar { display: block; font-weight: normal; font-size: 11px; color: #555; }
        .text-right { text-align: right; }
        .total-row td {
            font-weight: bold;
            font-size: 16px;
            border-top: 2px solid #333;
            border-bottom: none;
            background-color: #f9f9f9;
        }
        .footer {
            margin-top: 50px;
            text-align: center;
            font-size: 12px;
            color: #888;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }
        .paid { color: #0f9d58; border: 1px solid #0f9d58; }
        .pending { color: #f4b400; border: 1px solid #f4b400; }
        .ar-text { 
            font-family: 'Noto Sans', 'Noto Sans Arabic', 'DejaVu Sans', sans-serif;
            direction: rtl; 
            unicode-bidi: embed; 
        }
    </style>
</head>
<body>

    <div class="header">
        <div class="logo-section">
            {% if logo_base64 %}
                <img src="data:image/jpeg;base64,{{ logo_base64 }}" style="max-width: 200px; max-height: 80px;">
            {% else %}
                <h2>{{ platform_profile.name }}</h2>
            {% endif %}
        </div>
        <div class="company-info">
            <strong>{{ platform_profile.name }}</strong><br>
            {{ platform_profile.address|linebreaksbr }}<br>
            {% if platform_profile.vat_number %}
                VAT / الرقم الضريبي: {{ platform_profile.vat_number }}<br>
            {% endif %}
            Tel: {{ platform_profile.phone_number }}
        </div>
    </div>

    <div class="title">
        TAX INVOICE
        <span class="ar ar-text">فاتورة ضريبية</span>
    </div>

    <div class="details-grid">
        <div class="details-col">
            <div class="label">
                <span>INVOICE DETAILS</span>
                <span class="ar-text">تفاصيل الفاتورة</span>
            </div>
            <div class="value">
                <strong>No / رقم:</strong> #{{ parcel.id }}<br>
                <strong>Date / التاريخ:</strong> {{ parcel.created_at|date:"Y-m-d" }}<br>
                <strong>Status / الحالة:</strong> 
                <span class="status-badge {% if parcel.payment_status == 'paid' %}paid{% else %}pending{% endif %}">
                    {% if parcel.payment_status == 'paid' %}
                        PAID / مدفوع
                    {% else %}
                        PENDING / غير مدفوع
                    {% endif %}
                </span>
            </div>
        </div>
        <div class="details-col">
            <div class="label">
                <span>BILL TO (Shipper)</span>
                <span class="ar-text">فاتورة إلى (الشاحن)</span>
            </div>
            <div class="value">
                <strong>{{ parcel.shipper.first_name }} {{ parcel.shipper.last_name }}</strong><br>
                {{ parcel.shipper.profile.address }}<br>
                
                {% if parcel.shipper.profile.city %}
                    {{ parcel.shipper.profile.city.name_en }} / <span class="ar-text">{{ parcel.shipper.profile.city.name_ar }}</span><br>
                {% endif %}
                
                {% if parcel.shipper.profile.governate %}
                    {{ parcel.shipper.profile.governate.name_en }} / <span class="ar-text">{{ parcel.shipper.profile.governate.name_ar }}</span><br>
                {% endif %}
                
                {% if parcel.shipper.profile.country %}
                    {{ parcel.shipper.profile.country.name_en }} / <span class="ar-text">{{ parcel.shipper.profile.country.name_ar }}</span><br>
                {% endif %}
                
                <br>
                {{ parcel.shipper.email }}<br>
                {{ parcel.shipper.profile.phone_number }}
            </div>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th width="40%">
                    Description
                    <span class="ar ar-text">الوصف</span>
                </th>
                <th>
                    Tracking No
                    <span class="ar ar-text">رقم التتبع</span>
                </th>
                <th>
                    Distance
                    <span class="ar ar-text">المسافة</span>
                </th>
                <th>
                    Weight
                    <span class="ar ar-text">الوزن</span>
                </th>
                <th class="text-right">
                    Amount
                    <span class="ar ar-text">المبلغ</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Delivery Service / خدمة توصيل<br>
                    <small>{{ parcel.description|truncatechars:50 }}</small>
                </td>
                <td>{{ parcel.tracking_number }}</td>
                <td>{{ parcel.distance_km }} km</td>
                <td>{{ parcel.weight }} kg</td>
                <td class="text-right">{{ parcel.price }} OMR / <span class="ar-text">ر.ع.</span></td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="total-row">
                <td colspan="4" class="text-right">
                    TOTAL / الإجمالي
                </td>
                <td class="text-right">{{ parcel.price }} OMR / <span class="ar-text">ر.ع.</span></td>
            </tr>
        </tfoot>
    </table>

    <div class="footer">
        <p>Thank you for using {{ platform_profile.name }}!</p>
        <p class="ar-text">شكراً لاستخدامكم {{ platform_profile.name }}!</p>
        {% if platform_profile.registration_number %}
            <p>CR No / السجل التجاري: {{ platform_profile.registration_number }}</p>
        {% endif %}
    </div>

</body>
</html>