<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <!-- Meta Tags -->
  <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">
  <!-- Site Title -->
  <title>{{ title }}</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="tm_container">
    <div class="tm_invoice_wrap">
      <div class="tm_invoice tm_style1 tm_type3" id="tm_download_section">
        <div class="tm_shape_1">
          <svg width="850" height="151" viewBox="0 0 850 151" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M850 0.889398H0V150.889H184.505C216.239 150.889 246.673 141.531 269.113 124.872L359.112 58.0565C381.553 41.3977 411.987 32.0391 443.721 32.0391H850V0.889398Z" fill="#007AFF" fill-opacity="0.1"/>
          </svg>
        </div>
        <div class="tm_shape_2">
          <svg width="850" height="151" viewBox="0 0 850 151" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 150.889H850V0.889408H665.496C633.762 0.889408 603.327 10.2481 580.887 26.9081L490.888 93.7224C468.447 110.381 438.014 119.74 406.279 119.74H0V150.889Z" fill="#007AFF" fill-opacity="0.1"/>
          </svg>
        </div>
        <div class="tm_invoice_in">
          <div class="tm_invoice_head tm_align_center tm_mb20">
            <div class="tm_invoice_left">
              <div class="tm_logo"><img src="logo.png" alt="Logo" style="width: 120px;"></div>
            </div>
            <div class="tm_invoice_right tm_text_right">
              <div class="tm_primary_color tm_f50 tm_text_uppercase">{{ title }}</div>
              <div class="tm_stamp"><img src="stamp.png" alt="Stamp" style="width: 80px; margin-left: 20px;"></div>
            </div>
          </div>
          <div class="tm_invoice_info tm_mb20">
            <div class="tm_invoice_seperator">
              <img src="assets/img/arrow_bg.svg" alt="">
            </div>
            <div class="tm_invoice_info_list">
              <p class="tm_invoice_number tm_m0">Invoice No: <b class="tm_primary_color">{{ tracking_code }}</b></p>
              <p class="tm_invoice_date tm_m0">Date: <b class="tm_primary_color">{{ invoice_date }}</b></p>
              <div class="tm_invoice_info_list_bg tm_accent_bg_10"></div>
            </div>
          </div>
          <div class="tm_invoice_head tm_mb10">
            <div class="tm_invoice_left">
              <p class="tm_mb2"><b class="tm_primary_color">Invoice To:</b></p>
              <p>
                {{ customer_name }} <br>
                {{ customer_email }}
              </p>
            </div>
          </div>
          <div class="tm_table tm_style1 tm_mb30">
            <div class="tm_table_responsive">
              <table class="tm_border_bottom">
                <thead>
                  <tr class="tm_border_top">
                    <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10">Item</th>
                    <th class="tm_width_3 tm_semi_bold tm_primary_color tm_accent_bg_10">Description</th>
                    {% for column in custom_columns %}
                    <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10">{{ column }}</th>
                    {% endfor %}
                    <th class="tm_width_1 tm_semi_bold tm_primary_color tm_accent_bg_10">Quantity</th>
                    <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10 tm_text_right">Unit Price</th>
                    <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10 tm_text_right">Total</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in items %}
                  <tr>
                    <td class="tm_width_2">{{ loop.index }}. {{ item.description }}</td>
                    <td class="tm_width_3">{{ item.description }}</td>
                    {% for column in custom_columns %}
                    <td class="tm_width_2">{{ item.custom_data.get(column, '') }}</td>
                    {% endfor %}
                    <td class="tm_width_1">{{ item.quantity }}</td>
                    <td class="tm_width_2 tm_text_right">{{ item.unit_price }}</td>
                    <td class="tm_width_2 tm_text_right">{{ item.total_price }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="tm_invoice_footer">
              <div class="tm_left_footer">
                <p class="tm_mb2"><b class="tm_primary_color">Payment info:</b></p>
                <p class="tm_m0">{{ payment_info }}</p>
              </div>
              <div class="tm_right_footer">
                <table>
                  <tbody>
                    <tr>
                      <td class="tm_width_3 tm_primary_color tm_border_none tm_bold">Subtotal</td>
                      <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_bold">{{ subtotal }}</td>
                    </tr>
                    <tr>
                      <td class="tm_width_3 tm_primary_color tm_border_none tm_pt0">Discount <span class="tm_ternary_color">({{ discount_percentage }}%)</span></td>
                      <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_pt0">-{{ discount_amount }}</td>
                    </tr>
                    <tr>
                      <td class="tm_width_3 tm_primary_color tm_border_none tm_pt0">Tax <span class="tm_ternary_color">({{ tax_percentage }}%)</span></td>
                      <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_pt0">+{{ tax_amount }}</td>
                    </tr>
                    <tr class="tm_border_top tm_border_bottom">
                      <td class="tm_width_3 tm_border_top_0 tm_bold tm_f16 tm_primary_color">Grand Total</td>
                      <td class="tm_width_3 tm_border_top_0 tm_bold tm_f16 tm_primary_color tm_text_right">{{ grand_total }}</td>
                    </tr>
                  </tbody>
                </table>
                <div class="tm_sign_area tm_align_right" style="text-align: center; margin-top: 20px;">
                  <img src="signature.png" alt="Signature" style="width: 250px;">
                  <p class="tm_m0 tm_primary_color" style="margin-top: 5px;">Signature</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tm_padd_15_20">
            <p class="tm_mb2"><b class="tm_primary_color">Terms & Conditions:</b></p>
            <ul class="tm_m0 tm_note_list">
              <li>{{ notes }}</li>
            </ul>
          </div>
        </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="assets/js/jquery.min.js"></script>
  <script src="assets/js/jspdf.min.js"></script>
  <script src="assets/js/html2canvas.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>

</html>
