{% extends '_base.html' %}
{% load static %}
{% load humanize %}
{% load common_tags %}

{% block sidebar %}
  {% include 'sidebars/admin.html' %}
{% endblock sidebar %}

{% block navbar %}
  {% include 'navbars/admin.html' %}
{% endblock navbar %}

{% block title %}گزارش نهایی - درخواست {{ instance.code }}{% endblock %}

{% block content %}
{% include '_toasts.html' %}
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <div class="col-12 mb-4">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
          <h4 class="mb-1">گزارش نهایی درخواست {{ instance.code }}</h4>
          <small class="text-muted d-block">
            اشتراک آب: {{ instance.well.water_subscription_number|default:"-" }}
            | نماینده: {{ instance.representative.profile.national_code|default:"-" }}
          </small>
        </div>
        <div class="d-flex gap-2">
          {% if invoice %}
            <a href="{% url 'invoices:final_invoice_print' instance.id %}" target="_blank" class="btn btn-outline-secondary"><i class="bx bx-printer"></i> پرینت فاکتور</a>
          {% endif %}
          <a href="{% url 'certificates:certificate_print' instance.id %}" target="_blank" class="btn btn-outline-secondary"><i class="bx bx-printer"></i> پرینت گواهی</a>
          <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">بازگشت</a>
        </div>
      </div>

      <div class="row g-3">
        <div class="col-12">
          <div class="card border">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h6 class="mb-0">فاکتور نهایی</h6>
            </div>
            <div class="card-body">
              {% if invoice %}
              <div class="row g-3 mb-3">
                <div class="col-6 col-md-3"><div class="border rounded p-3 h-100"><div class="small text-muted">مبلغ نهایی</div><div class="h5 mt-1">{{ invoice.final_amount|floatformat:0|intcomma:False }} تومان</div></div></div>
                <div class="col-6 col-md-3"><div class="border rounded p-3 h-100"><div class="small text-muted">پرداختی‌ها</div><div class="h5 mt-1 text-success">{{ invoice.paid_amount|floatformat:0|intcomma:False }} تومان</div></div></div>
                <div class="col-6 col-md-3"><div class="border rounded p-3 h-100"><div class="small text-muted">مانده</div><div class="h5 mt-1 {% if invoice.remaining_amount <= 0 %}text-success{% else %}text-danger{% endif %}">{{ invoice.remaining_amount|floatformat:0|intcomma:False }} تومان</div></div></div>
              </div>
              <div class="table-responsive">
                <table class="table table-striped mb-0">
                  <thead>
                    <tr>
                      <th>آیتم</th>
                      <th class="text-center">تعداد</th>
                      <th class="text-end">قیمت واحد</th>
                      <th class="text-end">قیمت کل</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for it in rows %}
                    <tr>
                      <td>{{ it.item.name }}</td>
                      <td class="text-center">{{ it.quantity }}</td>
                      <td class="text-end">{{ it.unit_price|floatformat:0|intcomma:False }}</td>
                      <td class="text-end">{{ it.total_price|floatformat:0|intcomma:False }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="text-center text-muted">اطلاعاتی ندارد</td></tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% else %}
                <div class="text-muted">فاکتور نهایی ثبت نشده است.</div>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="card border">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h6 class="mb-0">گزارش نصب</h6>
              {% if latest_report and latest_report.assignment and latest_report.assignment.installer %}
                <span class="small text-muted">نصاب: {{ latest_report.assignment.installer.get_full_name|default:latest_report.assignment.installer.username }}</span>
              {% endif %}
            </div>
            <div class="card-body">
              {% if latest_report %}
                <div class="row g-3">
                  <div class="col-12 col-md-6">
                    <p class="text-nowrap mb-2"><i class="bx bx-calendar-event bx-sm me-2"></i>تاریخ مراجعه: {{ latest_report.visited_date|to_jalali|default:'-' }}</p>
                    <p class="text-nowrap mb-2"><i class="bx bx-purchase-tag bx-sm me-2"></i>سریال کنتور جدید: {{ latest_report.new_water_meter_serial|default:'-' }}</p>
                    <p class="text-nowrap mb-2"><i class="bx bx-lock-alt bx-sm me-2"></i>شماره پلمپ: {{ latest_report.seal_number|default:'-' }}</p>
                  </div>
                  <div class="col-12 col-md-6">
                    <p class="text-nowrap mb-2"><i class="bx bx-help-circle bx-sm me-2"></i>کنتور مشکوک: {{ latest_report.is_meter_suspicious|yesno:'بله,خیر' }}</p>
                    <p class="text-nowrap mb-2"><i class="bx bx-map bx-sm me-2"></i>UTM X: {{ latest_report.utm_x|default:'-' }}</p>
                    <p class="text-nowrap mb-2"><i class="bx bx-map-pin bx-sm me-2"></i>UTM Y: {{ latest_report.utm_y|default:'-' }}</p>
                  </div>
                </div>
                {% if latest_report.description %}
                  <div class="mt-2">
                    <p class="mb-0"><i class="bx bx-text bx-sm me-2"></i><strong>توضیحات:</strong></p>
                    <div class="text-muted">{{ latest_report.description }}</div>
                  </div>
                {% endif %}
                <hr>
                <h6>عکس‌ها</h6>
                <div class="row">
                  {% for p in latest_report.photos.all %}
                    <div class="col-6 col-md-3 mb-2"><img class="img-fluid rounded border" src="{{ p.image.url }}" alt="photo"></div>
                  {% empty %}
                    <div class="text-muted">بدون عکس</div>
                  {% endfor %}
                </div>
              {% else %}
                <div class="text-muted">گزارش نصب ثبت نشده است.</div>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="card border">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h6 class="mb-0">تراکنش‌ها</h6>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped mb-0">
                  <thead>
                    <tr>
                      <th>نوع</th>
                      <th>مبلغ</th>
                      <th>تاریخ</th>
                      <th>روش</th>
                      <th>شماره مرجع/چک</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for p in payments %}
                    <tr>
                      <td>{% if p.direction == 'in' %}<span class="badge bg-success">دریافتی{% else %}<span class="badge bg-warning text-dark">پرداختی{% endif %}</span></td>
                      <td>{{ p.amount|floatformat:0|intcomma:False }} تومان</td>
                      <td>{{ p.payment_date|date:'Y/m/d' }}</td>
                      <td>{{ p.get_payment_method_display }}</td>
                      <td>{{ p.reference_number|default:'-' }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="5" class="text-center text-muted">بدون تراکنش</td></tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
{% endblock %}