<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>فاکتور نهایی {{ invoice.name }} - {{ instance.code }}</title>
  
  {% load static %}
  {% load humanize %}

  <!-- Fonts (match base) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

  <!-- Icons (optional) -->
  <link rel="stylesheet" href="{% static 'assets/vendor/fonts/boxicons.css' %}">
  <link rel="stylesheet" href="{% static 'assets/vendor/fonts/fontawesome.css' %}">
  <link rel="stylesheet" href="{% static 'assets/vendor/fonts/flag-icons.css' %}">

  <!-- Core CSS (same as preview) -->
  <link rel="stylesheet" href="{% static 'assets/vendor/css/rtl/core.css' %}">
  <link rel="stylesheet" href="{% static 'assets/vendor/css/rtl/theme-default.css' %}">
  <link rel="stylesheet" href="{% static 'assets/css/demo.css' %}">
  <link rel="stylesheet" href="{% static 'assets/css/persian-fonts.css' %}">
  
  <style>
    @page {
      size: A4;
      margin: 1cm;
    }
    @media print {
      body { print-color-adjust: exact; }
      .page-break { page-break-before: always; }
      .no-print { display: none !important; }
    }
    .invoice-header { border-bottom: 1px solid #dee2e6; padding-bottom: 20px; margin-bottom: 30px; }
    .company-logo { font-size: 24px; font-weight: bold; color: #696cff; }
    .invoice-title { font-size: 28px; font-weight: bold; color: #333; }
    .info-table td { padding: 5px 10px; border: none; }
    .items-table { border: 1px solid #dee2e6; }
    .items-table th { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; font-weight: bold; text-align: center; }
    .items-table td { border-bottom: 1px solid #dee2e6; text-align: center; }
    .total-section { background-color: #f8f9fa; font-weight: bold; }
    .signature-section { margin-top: 50px; border-top: 1px solid #dee2e6; padding-top: 30px; }
    .signature-box { border: 1px dashed #ccc; height: 80px; text-align: center; display: flex; align-items: center; justify-content: center; color: #666; }
  </style>
</head>
<body>
  <div class="container-fluid">
    <!-- Header -->
    <div class="invoice-header">
      <div class="row align-items-center">
        <div class="col-6 d-flex align-items-center">
          <div class="me-3" style="width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#eef2ff;border-radius:8px;">
            {% if instance.broker.company and instance.broker.company.logo %}
              <img src="{{ instance.broker.company.logo.url }}" alt="لوگو" style="max-height:58px;max-width:120px;">
            {% else %}
              <span class="company-logo">شرکت</span>
            {% endif %}
          </div>
          <div>
            {% if instance.broker.company %}
              {{ instance.broker.company.name }}
            {% endif %}
            {% if instance.broker.company %}
              <div class="text-muted small">
                {% if instance.broker.company.address %}
                  <div>{{ instance.broker.company.address }}</div>
                {% endif %}
                {% if instance.broker.affairs.county.city.name %}
                  <div>{{ instance.broker.affairs.county.city.name }}، ایران</div>
                {% endif %}
                {% if instance.broker.company.phone %}
                  <div>تلفن: {{ instance.broker.company.phone }}</div>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </div>
        <div class="col-6 text-end">
          <div class="mt-2">
            <div><strong>#فاکتور نهایی {{ instance.code }}</strong></div>
            <div class="text-muted small">تاریخ صدور: {{ invoice.jcreated_date }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Customer & Well Info -->
    <div class="row mb-3">
      <div class="col-6">
        <h6 class="fw-bold mb-2">اطلاعات مشترک {% if instance.representative.profile and instance.representative.profile.user_type == 'legal' %}(حقوقی){% else %}(حقیقی){% endif %}</h6>
        {% if instance.representative.profile and instance.representative.profile.user_type == 'legal' %}
        <div class="small mb-1"><span class="text-muted">نام شرکت:</span> {{ instance.representative.profile.company_name|default:"-" }}</div>
        <div class="small mb-1"><span class="text-muted">شناسه ملی:</span> {{ instance.representative.profile.company_national_id|default:"-" }}</div>
        {% endif %}
        <div class="small mb-1"><span class="text-muted">نام:</span> {{ invoice.customer.get_full_name|default:instance.representative.get_full_name }}</div>
        {% if instance.representative.profile and instance.representative.profile.national_code %}
        <div class="small mb-1"><span class="text-muted">کد ملی:</span> {{ instance.representative.profile.national_code }}</div>
        {% endif %}
        {% if instance.representative.profile and instance.representative.profile.phone_number_1 %}
        <div class="small mb-1"><span class="text-muted">تلفن:</span> {{ instance.representative.profile.phone_number_1 }}</div>
        {% endif %}
        {% if instance.representative.profile and instance.representative.profile.address %}
        <div class="small"><span class="text-muted">آدرس:</span> {{ instance.representative.profile.address }}</div>
        {% endif %}
      </div>
      <div class="col-6">
        <h6 class="fw-bold mb-2">اطلاعات چاه</h6>
        <div class="small mb-1"><span class="text-muted">شماره اشتراک آب:</span> {{ instance.well.water_subscription_number }}</div>
        <div class="small mb-1"><span class="text-muted">شماره اشتراک برق:</span> {{ instance.well.electricity_subscription_number|default:"-" }}</div>
        <div class="small mb-1"><span class="text-muted">سریال کنتور:</span> {{ instance.well.water_meter_serial_number|default:"-" }}</div>
        <div class="small"><span class="text-muted">قدرت چاه:</span> {{ instance.well.well_power|default:"-" }}</div>
      </div>
    </div>

    <!-- Items Table -->
    <div class="mb-4">
      <table class="table border-top m-0 items-table">
        <thead>
          <tr>
            <th style="width: 5%">ردیف</th>
            <th style="width: 30%">شرح کالا/خدمات</th>
            <th style="width: 30%">توضیحات</th>
            <th style="width: 10%">تعداد</th>
            <th style="width: 12.5%">قیمت واحد(ریال)</th>
            <th style="width: 12.5%">قیمت کل(ریال)</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td class="text-nowrap">{{ it.item.name }}</td>
            <td class="text-nowrap">{{ it.item.description|default:"-" }}</td>
            <td>{{ it.quantity }}</td>
            <td>{{ it.unit_price|floatformat:0|intcomma:False }}</td>
            <td>{{ it.total_price|floatformat:0|intcomma:False }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="6" class="text-center text-muted">آیتمی ندارد</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-section">
            <td colspan="5" class="text-end"><strong>جمع کل(ریال):</strong></td>
            <td><strong>{{ invoice.total_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
          {% if invoice.discount_amount > 0 %}
          <tr class="total-section">
            <td colspan="5" class="text-end"><strong>تخفیف(ریال):</strong></td>
            <td><strong>{{ invoice.discount_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
          {% endif %}
          <tr class="total-section">
            <td colspan="5" class="text-end"><strong>مالیات بر ارزش افزوده(ریال):</strong></td>
            <td><strong>{{ invoice.get_vat_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
          <tr class="total-section border-top border-2">
            <td colspan="5" class="text-end"><strong>مبلغ نهایی (شامل مالیات)(ریال):</strong></td>
            <td><strong>{{ invoice.final_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
          <tr class="total-section">
            <td colspan="5" class="text-end"><strong>پرداختی‌ها(ریال):</strong></td>
            <td><strong">{{ invoice.get_paid_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
          <tr class="total-section">
            <td colspan="5" class="text-end"><strong>مانده(ریال):</strong></td>
            <td><strong>{{ invoice.get_remaining_amount|floatformat:0|intcomma:False }}</strong></td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- Conditions & Payment -->
    <div class="row">
      <div class="col-8">
        <h6 class="fw-bold">مهر و امضا:</h6>
        <ul class="small mb-0">
          {% if instance.broker.company and instance.broker.company.signature %}
          <li class="mt-3" style="list-style:none;"><img src="{{ instance.broker.company.signature.url }}" alt="امضا" style="height: 200px;"></li>
          {% endif %}
        </ul>
      </div>
      {% if instance.broker.company %}
      <div class="col-4">
        <h6 class="fw-bold mb-2">اطلاعات پرداخت</h6>
        {% if instance.broker.company.card_number %}
        <div class="small mb-1"><span class="text-muted">شماره کارت:</span> {{ instance.broker.company.card_number }}</div>
        {% endif %}
        {% if instance.broker.company.account_number %}
        <div class="small mb-1"><span class="text-muted">شماره حساب:</span> {{ instance.broker.company.account_number }}</div>
        {% endif %}
        {% if instance.broker.company.sheba_number %}
        <div class="small mb-1"><span class="text-muted">شماره شبا:</span> {{ instance.broker.company.sheba_number }}</div>
        {% endif %}
        {% if instance.broker.company.bank_name %}
        <div class="small"><span class="text-muted">بانک:</span> {{ instance.broker.company.get_bank_name_display }}</div>
        {% endif %}
      </div>
      {% endif %}
    </div>

  </div>

  <script>
    window.onload = function() {
      window.print();
      setTimeout(function(){ window.close(); }, 200);
    };
  </script>
</body>
</html>
