<!DOCTYPE html>
<html class="no-js" lang="en">
{% load static %}
{% load custom_filters %}

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Laralink">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
</head>
<body>
  <div class="tm_container">
    <div class="tm_invoice_wrap">
      <div class="tm_invoice tm_style2 tm_type1 tm_accent_border tm_radius_0 tm_small_border" id="tm_download_section">
        <div class="tm_invoice_in">
          <div class="tm_invoice_head tm_mb20 tm_m0_md">
            <div class="tm_invoice_left">
              <div class="tm_logo">
                {% if stamp_url %}
                <img src="{{ stamp_url }}" alt="Stamp">
                {% endif %}
              </div>
            </div>
            <div class="tm_invoice_right">
              <!-- Right section (could be filled with more information if needed) -->
            </div>
            <div class="tm_shape_bg tm_accent_bg_10 tm_border tm_accent_border_20"></div>
          </div>
          <div class="tm_invoice_info tm_mb30 tm_align_center">
            <div class="tm_invoice_info_left tm_mb20_md">
              <p class="tm_mb0">
                <b class="tm_primary_color">Invoice No: </b>{{ tracking_code }} <br>
                <b class="tm_primary_color">Invoice Date: </b>{{ invoice_date }}
              </p>
            </div>
            <div class="tm_invoice_info_right">
              <div class="tm_border tm_accent_border_20 tm_radius_0 tm_accent_bg_10 tm_curve_35 tm_text_center">
                <div>
                  <b class="tm_accent_color tm_f26 tm_medium tm_body_lineheight">{{ title }}</b>
                </div>
                <div>
                  <b class="tm_accent_color tm_f26 tm_medium tm_body_lineheight">Total: {{ grand_total }} {{ currency }}</b>
                </div>
              </div>
            </div>
          </div>
          <h2 class="tm_f16 tm_section_heading tm_accent_border_20 tm_mb0"><span class="tm_accent_bg_10 tm_radius_0 tm_curve_35 tm_border tm_accent_border_20 tm_border_bottom_0 tm_accent_color"><span>Invoice To</span></span></h2>
          <div class="tm_table tm_style1 tm_mb30">
            <div class="tm_border  tm_accent_border_20 tm_border_top_0">
              <div class="tm_table_responsive">
                <table>
                  <tbody>
                    <tr>
                      <td class="tm_width_6 tm_accent_border_20">
                        <b class="tm_primary_color tm_medium">Email: </b>{{ customer_email }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="tm_table tm_style1">
            <div class="tm_border tm_accent_border_20">
              <div class="tm_table_responsive">
                <table>
                  <thead>
                    <tr>
                      <th class="tm_width_3 tm_semi_bold tm_accent_color tm_accent_bg_10">#</th>
                      <th class="tm_width_4 tm_semi_bold tm_accent_color tm_accent_bg_10">Item Description</th>
                      {% for column in custom_columns %}
                      <th class="tm_width_2 tm_semi_bold tm_accent_color tm_accent_bg_10">{{ column }}</th>
                      {% endfor %}
                      <th class="tm_width_1 tm_semi_bold tm_accent_color tm_accent_bg_10">Quantity</th>
                      <th class="tm_width_2 tm_semi_bold tm_accent_color tm_accent_bg_10 tm_text_right">Unit Price</th>
                      <th class="tm_width_2 tm_semi_bold tm_accent_color tm_accent_bg_10 tm_text_right">Total Price</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for item in items %}
                    <tr>
                      <td class="tm_width_3 tm_accent_border_20">{{ forloop.counter }}</td>
                      <td class="tm_width_4 tm_accent_border_20">{{ item.description }}</td>
                      {% for column in custom_columns %}
                      <td class="tm_width_2 tm_accent_border_20">{{ item.custom_data|get_item:column }}</td>
                      {% endfor %}
                      <td class="tm_width_1 tm_accent_border_20">{{ item.quantity }} {{ item.measurement }}</td>
                      <td class="tm_width_2 tm_accent_border_20 tm_text_right">{{ item.unit_price }} {{ currency  }}</td>
                      <td class="tm_width_2 tm_accent_border_20 tm_text_right">{{ item.total_price }} {{ currency }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <div class="tm_invoice_footer tm_mb15 tm_m0_md">
              <div class="tm_left_footer">
              </div>
              <div class="tm_right_footer">
                <table class="tm_mb15 tm_m0_md">
                  <tbody>
                    <tr>
                      <td class="tm_width_3 tm_primary_color tm_border_none tm_medium">Subtotal</td>
                      <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_medium">{{ subtotal }} {{ currency }}</td>
                    </tr>
                    <tr>
                      <td class="tm_width_3 tm_danger_color tm_border_none tm_pt0">Discount {{ discount_percentage }}%</td>
                      <td class="tm_width_3 tm_danger_color tm_text_right tm_border_none tm_pt0">-{{ discount_amount }}</td>
                    </tr>
                    <tr>
                      <td class="tm_width_3 tm_danger_color tm_border_none tm_pt0">Concession {{ concession_percentage }}%</td>
                      <td class="tm_width_3 tm_danger_color tm_text_right tm_border_none tm_pt0">-{{ concession_amount }}</td>
                    </tr>
                    <tr>
                      <td class="tm_width_3 tm_primary_color tm_border_none tm_pt0">Tax {{ tax_percentage }}%</td>
                      <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_pt0">+{{ tax_amount }}</td>
                    </tr>
                    <tr class="tm_accent_border_20 tm_border">
                      <td class="tm_width_3 tm_bold tm_f16 tm_border_top_0 tm_accent_color tm_accent_bg_10">Grand Total</td>
                      <td class="tm_width_3 tm_bold tm_f16 tm_border_top_0 tm_accent_color tm_text_right tm_accent_bg_10">{{ grand_total }} {{ currency }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="tm_invoice_footer tm_type1">
              <div class="tm_left_footer"></div>
              <div class="tm_right_footer">
                <div class="tm_sign tm_text_center">
                  {% if sign_url %}
                  <img src="{{ sign_url }}" alt="Sign">
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          <div class="tm_bottom_invoice tm_accent_border_20">
            <div class="tm_bottom_invoice_left">
              <p class="tm_m0 tm_f18 tm_accent_color tm_mb5">Thank you for your business.</p>
            </div>
            <div class="tm_bottom_invoice_right tm_mobile_hide">
              {% if logo_url %}
              <div class="tm_logo"><img src="{{ logo_url }}" alt="Logo"></div>
              {% endif %}
            </div>
          </div>
          {% for field in additional_fields %}
              <div class="tm_padd_15_20 tm_round_border tm_mb15">
                  <div class="tm_note_section">
                  <p class="tm_mb5"><b class="tm_primary_color">{{ field.label }}:</b></p>
                      <ul class="tm_m0 tm_note_list">
                        {% for sentence in field.content|split_by_period %}
                          <li>{{ sentence }}</li>
                        {% endfor %}
                      </ul>
                  </div>
                </div>
          {% endfor %}
        </div>
      </div>
      <div class="tm_invoice_btns tm_hide_print">
        <a href="javascript:window.print()" class="tm_invoice_btn tm_color1">
          <span class="tm_btn_icon">
            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M384 368h24a40.12 40.12 0 0040-40V168a40.12 40.12 0 00-40-40H104a40.12 40.12 0 00-40 40v160a40.12 40.12 0 0040 40h24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><rect x="128" y="240" width="256" height="208" rx="24.32" ry="24.32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M384 128v-24a40.12 40.12 0 00-40-40H168a40.12 40.12 0 00-40 40v24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><circle cx="392" cy="184" r="24" fill="currentColor"/></svg>
          </span>
          <span class="tm_btn_text">Print</span>
        </a>
      </div>
    </div>
  </div>
  <script src="{% static 'assets/js/jquery.min.js' %}"></script>
  <script src="{% static 'assets/js/jspdf.min.js' %}"></script>
  <script src="{% static 'assets/js/html2canvas.min.js' %}"></script>
  <script src="{% static 'assets/js/main.js' %}"></script>
</body>
</html>
