{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Purchase Detail" %} #{{ purchase.id }} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- Action Bar -->
    <div class="d-flex justify-content-between align-items-center mb-4 d-print-none">
        <a href="{% url 'purchases' %}" class="btn btn-light rounded-3">
            <i class="bi bi-arrow-left me-2"></i>{% trans "Back to List" %} / العودة للقائمة
        </a>
        <div class="d-flex gap-2">
            <button onclick="downloadPDF()" class="btn btn-outline-primary rounded-3 px-4">
                <i class="bi bi-file-earmark-pdf me-2"></i>{% trans "Download PDF" %} / تحميل PDF
            </button>
            <button onclick="window.print()" class="btn btn-primary rounded-3 px-4 shadow-sm">
                <i class="bi bi-printer me-2"></i>{% trans "Print Invoice" %} / طباعة الفاتورة
            </button>
        </div>
    </div>

    <!-- Invoice Content -->
    <div id="purchase-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;">
        <div class="card-body p-0">
            <!-- Header Section -->
            <div class="p-5 bg-white">
                <div class="row mb-5">
                    <div class="col-sm-6">
                        {% if settings.logo %}
                            <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4">
                        {% else %}
                            <h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3>
                        {% endif %}
                        <div class="text-muted small">
                            <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
                            <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
                            <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
                            {% if settings.vat_number %}
                                <p class="mb-0"><i class="bi bi-receipt me-2"></i>{% trans "VAT" %} / الضريبة: {{ settings.vat_number }}</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-sm-6 text-sm-end">
                        <h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4">{% trans "Purchase Invoice" %} / فاتورة مشتريات</h1>
                        <div class="mb-4">
                            <div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div>
                            <div class="h5">{{ purchase.invoice_number|default:purchase.id }}</div>
                        </div>
                        <div class="row g-3">
                            <div class="col-4">
                                <div class="small text-muted fw-bold text-uppercase">{% trans "Issue Date" %} / تاريخ الإصدار</div>
                                <div>{{ purchase.created_at|date:"Y-m-d" }}</div>
                            </div>
                            <div class="col-4">
                                <div class="small text-muted fw-bold text-uppercase">{% trans "Issued By" %} / صادرة عن</div>
                                <div>{{ purchase.created_by.username|default:"System" }}</div>
                            </div>
                            <div class="col-4">
                                <div class="small text-muted fw-bold text-uppercase">{% trans "Due Date" %} / تاريخ الاستحقاق</div>
                                <div>{{ purchase.due_date|date:"Y-m-d"|default:"-" }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-5">
                    <div class="col-sm-6">
                        <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Supplier Information" %} / معلومات المورد</div>
                        <div class="h5 fw-bold mb-1">{{ purchase.supplier.name }}</div>
                        {% if purchase.supplier.phone %}
                            <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase.supplier.phone }}</div>
                        {% endif %}
                        {% if purchase.supplier.contact_person %}
                            <div class="text-muted small"><i class="bi bi-person me-2"></i>{{ purchase.supplier.contact_person }}</div>
                        {% endif %}
                    </div>
                    <div class="col-sm-6 text-sm-end">
                        <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Payment Status" %} / حالة الدفع</div>
                        <div>
                            {% if purchase.status == 'paid' %}
                                <span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Fully Paid" %} / مدفوع بالكامل</span>
                            {% elif purchase.status == 'partial' %}
                                <span class="h5 badge bg-warning text-dark rounded-pill px-4">{% trans "Partially Paid" %} / مدفوع جزئياً</span>
                            {% else %}
                                <span class="h5 badge bg-danger text-white rounded-pill px-4">{% trans "Unpaid" %} / غير مدفوع</span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Table Section -->
                <div class="table-responsive mb-5">
                    <table class="table table-hover align-middle">
                        <thead class="bg-light">
                            <tr>
                                <th class="py-3 ps-4 border-0">
                                    <div class="small text-muted">{% trans "Item Description" %}</div>
                                    <div class="small">وصف العنصر</div>
                                </th>
                                <th class="py-3 text-center border-0">
                                    <div class="small text-muted">{% trans "Cost Price" %}</div>
                                    <div class="small">سعر التكلفة</div>
                                </th>
                                <th class="py-3 text-center border-0">
                                    <div class="small text-muted">{% trans "Quantity" %}</div>
                                    <div class="small">الكمية</div>
                                </th>
                                <th class="py-3 text-end pe-4 border-0">
                                    <div class="small text-muted">{% trans "Total" %}</div>
                                    <div class="small">المجموع</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in purchase.items.all %}
                            <tr>
                                <td class="py-3 ps-4">
                                    <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
                                    <div class="text-muted small">{{ item.product.name_en }}</div>
                                </td>
                                <td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td>
                                <td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td>
                                <td class="py-3 text-end pe-4 fw-bold text-primary">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2" class="border-0"></td>
                                <td class="text-center py-3 fw-bold border-top">
                                    <div>{% trans "Grand Total" %}</div>
                                    <div class="small fw-normal">المجموع الكلي</div>
                                </td>
                                <td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top">{{ settings.currency_symbol }}{{ purchase.total_amount|floatformat:3 }}</td>
                            </tr>
                            <tr class="text-success">
                                <td colspan="2" class="border-0"></td>
                                <td class="text-center py-2 fw-bold">
                                    <div>{% trans "Total Paid" %}</div>
                                    <div class="small fw-normal">إجمالي المدفوع</div>
                                </td>
                                <td class="text-end pe-4 py-2 fw-bold">{{ settings.currency_symbol }}{{ purchase.paid_amount|floatformat:3 }}</td>
                            </tr>
                            <tr class="text-danger">
                                <td colspan="2" class="border-0"></td>
                                <td class="text-center py-2 fw-bold border-top">
                                    <div>{% trans "Balance Due" %}</div>
                                    <div class="small fw-normal">الرصيد المستحق</div>
                                </td>
                                <td class="text-end pe-4 py-2 h5 fw-bold border-top">{{ settings.currency_symbol }}{{ purchase.balance_due|floatformat:3 }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Amount in Words -->
                <div class="mb-5 px-5">
                    <div class="p-3 bg-light rounded-3">
                        <div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
                        <div class="fw-bold text-dark">{{ amount_in_words }}</div>
                    </div>
                </div>

                <!-- Payment History -->
                {% if purchase.payments.exists %}
                <div class="mb-5 px-5">
                    <h5 class="fw-bold mb-3"><i class="bi bi-credit-card me-2"></i>{% trans "Payment History" %} / سجل الدفعات</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="bg-light small">
                                <tr>
                                    <th>{% trans "Date" %} / التاريخ</th>
                                    <th>{% trans "Method" %} / الطريقة</th>
                                    <th>{% trans "Amount" %} / المبلغ</th>
                                    <th>{% trans "User" %} / المستخدم</th>
                                    <th>{% trans "Notes" %} / ملاحظات</th>
                                </tr>
                            </thead>
                            <tbody class="small">
                                {% for payment in purchase.payments.all %}
                                <tr>
                                    <td>{{ payment.payment_date|date:"Y-m-d" }}</td>
                                    <td>
                                        {% if payment.payment_method %}
                                            {{ payment.payment_method.name_ar }} / {{ payment.payment_method.name_en }}
                                        {% else %}
                                            {{ payment.payment_method_name }}
                                        {% endif %}
                                    </td>
                                    <td class="fw-bold">{{ settings.currency_symbol }}{{ payment.amount|floatformat:3 }}</td>
                                    <td>{{ payment.created_by.username|default:"System" }}</td>
                                    <td class="text-muted">{{ payment.notes }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}

                <!-- Notes -->
                {% if purchase.notes %}
                <div class="bg-light p-4 rounded-3 mb-5 mx-5">
                    <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
                    <p class="mb-0 small">{{ purchase.notes }}</p>
                </div>
                {% endif %}

                <div class="text-center text-muted small mt-5 border-top pt-4 pb-5">
                    <p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function downloadPDF() {
    const element = document.getElementById('purchase-card');
    const opt = {
        margin:       0,
        filename:     'Purchase_{{ purchase.invoice_number|default:purchase.id }}.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2, useCORS: true, letterRendering: true },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(element).save();
}
</script>

<style>
@media print {
    @page { 
        size: A4 portrait; 
        margin: 0; 
    }
    body { 
        background-color: white !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .container { 
        width: 210mm !important; 
        max-width: 210mm !important; 
        margin: 0 auto !important; 
        padding: 0 !important; 
    }
    #purchase-card {
        width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .d-print-none { display: none !important; }
    .p-5 { padding: 15mm !important; }
    .table-responsive { overflow: visible !important; }
}
</style>
{% endblock %}