{% extends '_base.html' %}
{% load static %}
{% load humanize %}
{% load common_tags %}
{% load processes_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' %}

<!-- Instance Info Modal -->
{% instance_info_modal instance %}


<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_info instance %}
          </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 me-2"></i> پرینت فاکتور
            </a>
          {% endif %}
          <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#printHologramModal">
            <i class="bx bx-printer me-2"></i> پرینت گواهی
          </button>
          <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">
            <i class="bx bx-chevron-right bx-sm ms-sm-n2"></i>
            بازگشت
          </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.get_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.get_remaining_amount <= 0 %}text-success{% else %}text-danger{% endif %}">{{ invoice.get_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>
              <div class="d-flex align-items-center gap-3">
                {% if installation_delay_days > 0 %}
                  <span class="badge bg-warning text-dark">
                    <i class="bx bx-time-five bx-xs"></i> {{ installation_delay_days }} روز تاخیر
                  </span>
                {% elif installation_assignment and latest_report %}
                  <span class="badge bg-success">
                    <i class="bx bx-check bx-xs"></i> به موقع
                  </span>
                {% endif %}
                {% 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>
            <div class="card-body">
              {% if latest_report %}
                <!-- اطلاعات گزارش نصب -->
                <div class="row g-3 mb-3">
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-calendar bx-sm me-2"></i>تاریخ مراجعه: {{ latest_report.visited_date|to_jalali|default:'-' }}</p>
                  </div>
                  {% if installation_assignment.scheduled_date %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-calendar-star bx-sm me-2"></i>تاریخ برنامه‌ریزی: {{ installation_assignment.scheduled_date|to_jalali }}</p>
                  </div>
                  {% endif %}
                  <div class="col-12 col-md-4">
                    <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>
                  </div>
                  <div class="col-12 col-md-4">
                    <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-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-help-circle bx-sm me-2"></i>کنتور مشکوک: {{ latest_report.is_meter_suspicious|yesno:'بله,خیر' }}</p>
                  </div>
                  {% if latest_report.sim_number %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-mobile bx-sm me-2"></i>شماره سیمکارت: {{ latest_report.sim_number }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.meter_type %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-category bx-sm me-2"></i>نوع کنتور: {{ latest_report.get_meter_type_display }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.meter_size %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-ruler bx-sm me-2"></i>سایز کنتور: {{ latest_report.meter_size }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.water_meter_manufacturer %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-buildings bx-sm me-2"></i>سازنده: {{ latest_report.water_meter_manufacturer.name }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.discharge_pipe_diameter %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-shape-circle bx-sm me-2"></i>قطر لوله آبده: {{ latest_report.discharge_pipe_diameter }} اینچ</p>
                  </div>
                  {% endif %}
                  {% if latest_report.usage_type %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-droplet bx-sm me-2"></i>نوع مصرف: {{ latest_report.get_usage_type_display }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.driving_force %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-car bx-sm me-2"></i>نیرو محرکه: {{ latest_report.driving_force }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.motor_power %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-tag bx-sm me-2"></i>قدرت موتور: {{ latest_report.motor_power }} کیلووات ساعت</p>
                  </div>
                  {% endif %}
                  {% if latest_report.exploitation_license_number %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-id-card bx-sm me-2"></i>شماره پروانه: {{ latest_report.exploitation_license_number }}</p>
                  </div>
                  {% endif %}
                  {% if latest_report.pre_calibration_flow_rate %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-water bx-sm me-2"></i>دبی قبل از کالیبراسیون: {{ latest_report.pre_calibration_flow_rate }} لیتر/ثانیه</p>
                  </div>
                  {% endif %}
                  {% if latest_report.post_calibration_flow_rate %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-tachometer bx-sm me-2"></i>دبی بعد از کالیبراسیون: {{ latest_report.post_calibration_flow_rate }} لیتر/ثانیه</p>
                  </div>
                  {% endif %}
                  <div class="col-12 col-md-4">
                    <p class="text-nowrap mb-2"><i class="bx bx-map bx-sm me-2"></i>UTM X: {{ latest_report.utm_x|default:'-' }}</p>
                  </div>
                  <div class="col-12 col-md-4">
                    <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="mb-3">
                    <h6 class="text-primary mb-2"><i class="bx bx-text me-1"></i>توضیحات</h6>
                    <div class="text-muted">{{ latest_report.description }}</div>
                  </div>
                {% endif %}
                
                <h6 class="text-primary mb-2"><i class="bx bx-image me-1"></i>عکس‌ها</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>

<!-- Print Hologram Modal -->
<div class="modal fade" id="printHologramModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{% url 'certificates:certificate_print' instance.id %}" target="_blank">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">کد یکتا هولوگرام</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <label class="form-label">کد هولوگرام</label>
          <input type="text" class="form-control" name="hologram_code" value="{{ certificate.hologram_code|default:'' }}" placeholder="مثال: 123456" required>
          <div class="form-text">این کد باید با کد هولوگرام روی گواهی یکسان باشد.</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">انصراف</button>
          <button type="submit" class="btn btn-primary">ثبت و پرینت</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}


