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

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">{% trans "VAT Report" %} / تقرير ضريبة القيمة المضافة</h2>
            <p class="text-muted">{% trans "Tax Declaration Summary" %} / ملخص الإقرار الضريبي</p>
        </div>
        <div>
            <button onclick="window.print()" class="btn btn-outline-secondary">
                <i class="bi bi-printer"></i> {% trans "Print" %} / طباعة
            </button>
        </div>
    </div>

    <!-- Filter Form -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">{% trans "Start Date" %} / تاريخ البدء</label>
                    <input type="date" name="start_date" class="form-control" value="{{ start_date }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{% trans "End Date" %} / تاريخ الانتهاء</label>
                    <input type="date" name="end_date" class="form-control" value="{{ end_date }}">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-filter"></i> {% trans "Generate Report" %} / إنشاء التقرير
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Report Content -->
    <div class="row">
        <!-- Sales / Output Tax -->
        <div class="col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-light py-3">
                    <h5 class="card-title mb-0 text-primary">
                        1. {% trans "Sales (Output VAT)" %} / المبيعات (ضريبة المخرجات)
                    </h5>
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped mb-0">
                        <tbody>
                            <tr>
                                <td class="py-3">{% trans "Total Sales (Excl. VAT)" %} <br> <small class="text-muted">إجمالي المبيعات (غير شامل الضريبة)</small></td>
                                <td class="text-end py-3 fw-bold">{{ total_sales_subtotal|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                            <tr>
                                <td class="py-3">{% trans "Total VAT Collected" %} <br> <small class="text-muted">إجمالي الضريبة المحصلة</small></td>
                                <td class="text-end py-3 fw-bold text-danger">{{ total_output_vat|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                            <tr class="table-primary">
                                <td class="py-3">{% trans "Total Gross Sales" %} <br> <small class="text-muted">إجمالي المبيعات (شامل الضريبة)</small></td>
                                <td class="text-end py-3 fw-bold">{{ total_sales_gross|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Purchases / Input Tax -->
        <div class="col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-light py-3">
                    <h5 class="card-title mb-0 text-success">
                        2. {% trans "Purchases (Input VAT)" %} / المشتريات (ضريبة المدخلات)
                    </h5>
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped mb-0">
                        <tbody>
                            <tr>
                                <td class="py-3">{% trans "Total Purchases (Excl. VAT)" %} <br> <small class="text-muted">إجمالي المشتريات (غير شامل الضريبة)</small></td>
                                <td class="text-end py-3 fw-bold">{{ total_purchases_subtotal|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                            <tr>
                                <td class="py-3">{% trans "Total VAT Paid (Recoverable)" %} <br> <small class="text-muted">إجمالي الضريبة المدفوعة (القابلة للاسترداد)</small></td>
                                <td class="text-end py-3 fw-bold text-success">{{ total_input_vat|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                            <tr class="table-success">
                                <td class="py-3">{% trans "Total Gross Purchases" %} <br> <small class="text-muted">إجمالي المشتريات (شامل الضريبة)</small></td>
                                <td class="text-end py-3 fw-bold">{{ total_purchases_gross|floatformat:3 }} {{ global_settings.currency_symbol }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Net VAT Position -->
        <div class="col-12">
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body text-center py-4">
                    <h4 class="mb-2">{% trans "Net VAT Payable / (Refundable)" %}</h4>
                    <h5 class="mb-3">صافي الضريبة المستحقة الدفع / (المستردة)</h5>
                    <h1 class="display-4 fw-bold mb-0">
                        {{ net_vat|floatformat:3 }} {{ global_settings.currency_symbol }}
                    </h1>
                    <p class="mt-2 mb-0 opacity-75">
                        {% if net_vat > 0 %}
                            {% trans "Amount to be paid to Tax Authority" %} / المبلغ المستحق للدفع للهيئة الضريبية
                        {% else %}
                            {% trans "Amount to be refunded from Tax Authority" %} / المبلغ المستحق للاسترداد من الهيئة الضريبية
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}