
{% load price_filters %}
<!doctype html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>صورت‌حساب الکترونیکی - شماره {{ order_number }}</title>

    <style>
      @page {
        size: A4 landscape;
        margin: 8mm;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: #fff;
        color: #1e293b;
        line-height: 1.4;
        padding: 0;
        font-size: 10px;
        font-family: 'Vazir', 'Tahoma', Arial, sans-serif;
        direction: rtl;
      }

      .pattern-bg {
        position: fixed;
        inset: 0;
        width: 200%;
        height: 200%;
        left: -50%;
        top: -50%;
        background: url("{{ logo_pattern_path }}") repeat;
        background-size: 100px;
        opacity: 0.04;
        transform: rotate(12deg);
        z-index: -1;
        pointer-events: none;
      }

      .main-container {
        width: 100%;
        max-width: 1040px;
        margin: 0 auto;
        position: relative;
      }

      .qr-box {
        position: absolute;
        left: 20px;
        bottom: 0;
        transform: translateY(50%);
        width: 80px;
        height: 80px;
        border: 1.5px solid #6366f1;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        padding: 3px;
        z-index: 10;
      }

      .qr-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .title-row {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: bold;
        color: #6366f1;
        gap: 16px;
        margin-bottom: 12px;
        text-align: center;
      }

      .title-row img {
        width: 56px;
      }

      .grid-row {
        direction: ltr;
        display: grid;
        grid-template-columns: 220px 1fr 50px;
        gap: 6px;
        margin-bottom: 6px;
      }

      .vertical-label {
        background: #e0e7ff;
        border: 1.5px solid #6366f1;
        color: #6366f1;
        border-radius: 8px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        direction: rtl;
        padding: 4px 2px;
        font-size: 9px;
        line-height: 1.6;
        overflow: hidden;
      }

      .info-panel {
        background: white;
        border: 1.5px solid #6366f1;
        border-radius: 8px;
        padding: 6px 8px;
        direction: rtl;
        overflow: hidden;
      }

      .info-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
      }

      .info-item {
        display: flex;
        gap: 3px;
        white-space: nowrap;
        font-size: 9px;
      }

      .info-item span:first-child {
        font-weight: 600;
        color: #4b5563;
      }

      .doc-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .buyer-row {
        direction: ltr;
        display: grid;
        grid-template-columns: 1fr 50px;
        gap: 6px;
        margin-bottom: 8px;
      }

      .table-wrapper {
        border: 1.5px solid #6366f1;
        border-radius: 8px;
        background: white;
        overflow: hidden;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9px;
        text-align: center;
      }

      th,
      td {
        padding: 4px 3px;
        border: 1px solid #e0e7ff;
      }

      thead th {
        background: #e0e7ff;
        color: #6366f1;
        font-weight: 600;
        font-size: 8px;
      }

      .summary-row td {
        background: #f1f5f9;
        font-weight: 600;
      }

      .grand-total-row {
        background: #e0e7ff;
      }

      .grand-total-row td:last-child {
        font-weight: bold;
      }

      .discount-highlight {
        color: #d32f2f;
        font-weight: bold;
      }

      .status-badge {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 8px;
        font-size: 8px;
        font-weight: bold;
      }

      .status-paid {
        background-color: #4CAF50;
        color: white;
      }

      .status-unpaid {
        background-color: #f44336;
        color: white;
      }

      .status-pending {
        background-color: #ff9800;
        color: white;
      }

      .signatures {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        padding: 8px;
        border-top: 1.5px solid #6366f1;
        height: 80px;
        font-size: 9px;
      }

      .sign-item {
        display: flex;
        gap: 3px;
        white-space: nowrap;
      }

      .sign-item span:first-child {
        font-weight: 600;
        color: #4b5563;
      }

      .discount-section {
        padding: 8px;
        border-top: 1.5px solid #e0e7ff;
      }

      .footer {
        margin-top: 12px;
        text-align: center;
        padding-top: 6px;
        border-top: 1px solid #ddd;
        color: #777;
        font-size: 8px;
      }
    </style>
  </head>
  <body>
    <div class="pattern-bg"></div>

    <div class="main-container">
      <!-- QR -->
      {% comment %} <div class="qr-box">
        <img src="{{ qr_code_path }}" alt="QR" />
      </div> {% endcomment %}

      <!-- Header -->
      <div class="title-row">
        <div class="text-end" style="width: 100%;display: flex;justify-content: end;">صورت حساب الکترونیکی</div>
        <div>
          <img src="{{ logo_path }}" alt="Logo" />
        </div>
        <div class="text-start" style="width: 100%;display: flex;justify-content: start;">فروشگاه هی ملز</div>
      </div>

      <!-- Seller + Document Info -->
      <div class="grid-row">
        <!-- Left: Document Info (شماره فاکتور) -->
        <div class="info-panel">
          <div class="doc-info">
            <div class="info-item">
              <span>شماره فاکتور :</span><span>{{ order_number }}</span>
            </div>
            <div class="info-item">
              <span>تاریخ :</span><span>{{ created_at_jalali|default:"---" }}</span>
            </div>
            <div class="info-item">
              <span>وضعیت پرداخت :</span>
              <span>
                {% if is_paid %}
                <span class="status-badge status-paid">پرداخت شده</span>
                {% else %}
                <span class="status-badge status-unpaid">پرداخت نشده</span>
                {% endif %}
              </span>
            </div>
            <div class="info-item">
              <span>وضعیت سفارش :</span>
              <span><span class="status-badge status-pending">{{ status }}</span></span>
            </div>
          </div>
        </div>

        <!-- Middle: Seller Info -->
        <div class="info-panel">
          <div class="info-flex">
            <div class="info-item">
              <span>فرستنده :</span><span>فروشگاه هی ملز</span>
            </div>
            <div class="info-item">
              <span>شناسه ملی :</span><span>---</span>
            </div>
            <div class="info-item">
              <span>شماره ثبت :</span><span>---</span>
            </div>
            <div class="info-item">
              <span>شماره مجوز :</span><span>---</span>
            </div>
            <div class="info-item">
              <span>نشانی شرکت :</span><span>---</span>
            </div>
            <div class="info-item">
              <span>کد پستی :</span><span>---</span>
            </div>
            <div class="info-item">
              <span>تلفن و فکس :</span><span>---</span>
            </div>
          </div>
        </div>

        <!-- Right: Vertical Label -->
        <div class="vertical-label">هی ملز</div>
      </div>

      <!-- Buyer -->
      <div class="buyer-row">
        <div class="info-panel">

          <div class="info-flex">
            {% if user %}
            <div class="info-item">
              <span>خریدار :</span><span>{{ user.first_name }} {{ user.last_name }}</span>
            </div>
            <div class="info-item">
              <span>ایمیل :</span><span>{{ user.email|default:"---" }}</span>
            </div>
            <div class="info-item">
              <span>شماره تماس :</span><span>{{ user.phone }}</span>
            </div>
            {% endif %}
            {% if address %}
            <div class="info-item">
              <span>نام گیرنده :</span><span>{{ address.name }}</span>
            </div>
            <div class="info-item">
              <span>کد پستی :</span><span>{{ address.postal_code }}</span>
            </div>
            <div class="info-item">
              <span>شهر/استان :</span><span>{{ address.city }}، {{ address.province }}</span>
            </div>
            <div class="info-item">
              <span>تلفن :</span><span>{{ address.phone }}</span>
            </div>
            <div class="info-item">
              <span>نشانی :</span><span>{{ address.address }}</span>
            </div>
            {% endif %}
          </div>
        </div>
        <div class="vertical-label">خریدار</div>
      </div>

      <!-- Table + Footer -->
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>ردیف</th>
              <th>نام محصول</th>
              <th>تنوع</th>
              <th>تعداد</th>
              <th>قیمت واحد (تومان)</th>
              <th>جمع (تومان)</th>
              <th>تخفیف محصول</th>
              <th>تخفیف ویژه (تومان)</th>
              <th>قیمت نهایی (تومان)</th>
            </tr>
          </thead>
          <tbody>
            {% for item_data in items_with_discount %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ item_data.item.product.product.name }}</td>
              <td>{{ item_data.item.product.title }}</td>
              <td>{{ item_data.item.quantity }}</td>
              <td>{{ item_data.unit_price|price_format }}</td>
              <td>{{ item_data.price_before_discount|price_format }}</td>
              <td class="discount-highlight">
                {% if item_data.item.discount_percent > 0 %}
                {{ item_data.item.discount_percent }}% ({{ item_data.discount_amount|price_format }})
                {% else %}
                ---
                {% endif %}
              </td>
              <td class="discount-highlight">
                {% if item_data.item.special_discount_amount > 0 %}
                {{ item_data.item.special_discount_amount|price_format }}
                {% else %}
                ---
                {% endif %}
              </td>
              <td>{{ item_data.final_price|price_format }}</td>
            </tr>
            {% endfor %}

            <tr class="summary-row">
              <td colspan="3">جمع کل</td>
              <td>{{ total_items }}</td>
              <td>---</td>
              <td>{{ subtotal|price_format }}</td>
              <td class="discount-highlight">
                {% if items_discount_amount > 0 %}
                -{{ items_discount_amount|price_format }}
                {% else %}
                0
                {% endif %}
              </td>
              <td class="discount-highlight">
                {% if special_discount_total > 0 %}
                -{{ special_discount_total|price_format }}
                {% else %}
                0
                {% endif %}
              </td>
              <td>---</td>
            </tr>

            {% if discount_amount > 0 %}
            <tr class="summary-row">
              <td colspan="8" style="text-align: center;">
                تخفیف کد تخفیف
                {% if discount_code %}({{ discount_code.code }} - {{ discount_code.percent }}%){% endif %}
              </td>
              <td class="discount-highlight">-{{ discount_amount|price_format }}</td>
            </tr>
            {% endif %}

            <tr class="summary-row">
              <td colspan="8" style="text-align: center;">
                مالیات ({{ tax_rate }}%)
              </td>
              <td>{{ tax|price_format }}</td>
            </tr>

            <tr class="grand-total-row">
              <td colspan="8" style="text-align: center; border-left: none">
                جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (تومان)
              </td>
              <td><strong>{{ final_price|price_format }}</strong></td>
            </tr>
          </tbody>
        </table>

        <div class="signatures">
          <div class="sign-item">
            <span>مهر و امضای فروشگاه :</span><span></span>
          </div>
          <div class="sign-item">
            <span>تاریخ تحویل :</span><span></span>
          </div>
          <div class="sign-item">
            <span>ساعت تحویل :</span><span></span>
          </div>
          <div class="sign-item">
            <span>روش های پرداخت :</span>
            <span>
              {% if is_paid %}
              پرداخت شده
              {% else %}
              پرداخت نشده
              {% endif %}
            </span>
          </div>
          <div class="sign-item">
            <span>مهر و امضای خریدار :</span><span></span>
          </div>
        </div>
      </div>

      <div class="footer">
        <p>با تشکر از خرید شما</p>
        <p>این فاکتور به صورت الکترونیکی صادر شده و نیازی به امضا و مهر ندارد</p>
      </div>
    </div>
  </body>
</html>
