<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tax Invoice</title>

  <style>
    /* ====================================
   GLOBAL
==================================== */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background: #f2f2f2;
      padding: 20px;
    }

    .invoice-container {
      width: 1000px;
      margin: auto;
      background: #fff;
      padding: 20px;
    }

    /* ====================================
   COMMON
==================================== */

    table {
      width: 100%;
      border-collapse: collapse;
    }

    td,
    th {
      /* border: 1px solid #000; */
      padding: 3px 6px;
      vertical-align: top;
      font-size: 13px;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    /* ====================================
   HEADER
==================================== */

    .top-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .logo {
      width: 100px;
    }

    .company-details {
      flex: 1;
      text-align: center;
      margin-right: 70px;
    }

    .company-details h1 {
      font-size: 17px;
      margin-bottom: 2px;
      font-weight: 700;
    }

    .company-details p {
      font-size: 11px;
      line-height: 1.2;
    }

    /* ====================================
   INVOICE TITLE
==================================== */

    .invoice-title {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      /* margin: 10px 0; */
    }

    /* ====================================
   ADDRESS TABLE
==================================== */

    .address-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-top: 10px;
    }

    .address-card {
      width: 33.33%;
      border: 1px solid #cfcfcf;
      padding: 4px;
      vertical-align: top;
    }

    .address-label {
      font-size: 11px;
      font-weight: 700;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 3px;
    }

    .doc-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .party-name {
      font-size: 13px;
      font-weight: 700;
      color: #111;
      line-height: 20px;
    }

    .address-content {
      font-size: 12px;
      color: #333;
      line-height: 16px;
    }

    .doc-info-table {
      width: 100%;
      border-collapse: collapse;
    }

    .doc-info-table td {
      padding: 2px 0;
      font-size: 11px;
      line-height: 20px;
      font-size: 12px;
      color: #333;
      line-height: 16px;

      font-weight: 500;
    }

    /* ====================================
   PRODUCT TABLE
==================================== */

    .product-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-top: 10px;
    }

    .product-table th {
      background: #f3f3f3;
      border: 1px solid #cfcfcf;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      text-align: left;
      color: #444;
      letter-spacing: 0.5px;
    }

    .product-table td {
      border-right: 1px solid #cfcfcf;
      border-left: 1px solid #cfcfcf;
      border-bottom: 1px dashed #cfcfcf;
      padding: 5px 10px;

      font-size: 12px;
      color: #222;
      line-height: 15px;
      vertical-align: middle;
    }

    .slno-col {
      width: 7%;
    }

    .product-col {
      width: 42%;
    }

    .uom-col {
      width: 8%;
    }

    .qty-col {
      width: 9%;
    }

    .rate-col {
      width: 8%;
    }

    .discount-col {
      width: 9%;
    }

    .gst-col {
      width: 8%;
    }

    .value-col {
      width: 9%;
    }

    .product-cell {
      line-height: 18px;
    }

    .product-title {
      font-size: 11px;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .product-subtitle {
      font-size: 11px;
      font-weight: 500;
    }

    .sub-value {
      font-size: 10px;
      color: #000;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    /* ====================================
   TERMS & SUMMARY
==================================== */

    .invoice-summary-wrapper {
      width: 100%;
      margin-top: 14px;
      display: table;
      table-layout: fixed;
    }

    .terms-box,
    .summary-box {
      display: table-cell;
      vertical-align: top;
      border: 1px solid #cfcfcf;
    }

    .terms-box {
      width: 70%;
      padding: 8px 12px;
      vertical-align: top;
    }

    .summary-box {
      width: 45%;
    }

    .summary-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: #111;
      letter-spacing: 0.7px;
      margin-bottom: 5px;
    }

    .terms-title {
      font-size: 12px;
      font-weight: 700;
      color: #000;
      margin-bottom: 3px;
    }

    .terms-content {
      font-size: 11px;
      line-height: 16px;
      color: #000;
      font-weight: 600;
    }

    .summary-table {
      width: 100%;
      border-collapse: collapse;
    }

    .summary-table td {
      padding: 3px 12px;
      font-size: 12px;
      color: #222;
      border-bottom: 1px solid #e2e2e2;
    }

    .summary-table tr:last-child td {
      border-bottom: none;
    }

    .summary-highlight td {
      font-weight: 700;
    }

    .total-row td {
      font-size: 13px;
      font-weight: 700;
      background: #f5f5f5;
      color: #111;
    }

    /* ====================================
   AMOUNT WORDS
==================================== */

    .amount-words-box {
      margin-top: 10px;
      /* padding: 10px 14px; */
      font-size: 12px;
      line-height: 20px;

      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;

      text-align: right;
    }

    .amount-label {
      font-weight: 700;
      color: #111;
      white-space: nowrap;
    }

    .amount-text {
      color: #333;
      max-width: 650px;
    }

    /* ====================================
   SIGNATURE TABLE
==================================== */

    .signature-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-top: 10px;
    }

    .signature-col {
      width: 25%;
      border: 1px solid #cfcfcf;
      padding: 8px 10px;
      vertical-align: bottom;
      text-align: center;
      height: 70px;
    }

    .signature-name {
      font-size: 13px;
      font-weight: 500;
      color: #111;
      line-height: 18px;
    }

    .signature-role {
      font-size: 12px;
      font-weight: 700;
      color: #111;
      margin-top: 2px;
    }

    .auth-sign-box {
      position: relative;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
    }

    .company-sign {
      font-size: 11px;
      font-weight: 700;
      color: #111;
      line-height: 16px;
      margin-bottom: 2px;
    }

    .signature-wrapper {
      position: relative;
      height: 50px;
    }
     .terms-content {
            font-size: 12px;
            line-height: 20px;
            color: #333;
        }

    .auth-sign-box .signature-name {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      color: #000;
    }

    .digital-sign {
      position: absolute;
      top: 0;
      right: 0;
      text-align: left;
      font-size: 10px;
      line-height: 14px;
      color: #111;
    }

    .auth-sign-box .signature-role {
      font-size: 12px;
      font-weight: 700;
    }

    /* ====================================
   FOOTER
==================================== */

    .footer-note {
      margin-top: 12px;
      text-align: center;
      font-size: 11px;
      color: #666;
      border-top: 1px solid #dcdcdc;
      padding-top: 8px;
    }

    /* ====================================
   PRINT
==================================== */

    @media print {
      body {
        background: #fff;
        padding: 0;
      }

      .invoice-container {
        border: none;
      }
    }
  </style>
</head>

<body>
  <div class="invoice-container">
    <!-- Header -->
    <div class="top-header">
      <!-- <img src="../assets/images/logo.png" class="logo" alt="logo" /> -->
       <img src="{{logo_url}}" class="logo" />

      <div class="company-details">
        <!-- <h1>Vivek Bio-Products Private Limited</h1>

        <p>
          Flat No. - 406,4th Floor , Kadiris Apuroopa Urban,Botanical Garden
          Road Kondapur
        </p>

        <p>Hyderabad,Telangana,India-500084</p>

        <p>PAN No : AAICV8996R</p>

        <p>GSTIN : 36AAICV8996R1ZU, CIN No : U24100TG2022PTC165236</p>

        <p>sales@vivekbio.com, 8019637711</p> -->
         <h1>{{company_name}}</h1>

                <p>{{company_address}}</p>

                <p>PAN No : {{company_cin}}</p>

                <p>GSTIN : {{company_gstin}}</p>

                <p>{{company_email}}, {{company_phone}}</p>
      </div>
    </div>

    <!-- Title -->
    <div class="invoice-title">Sales Quotation</div>

    <!-- Address Section -->
    <table class="address-table">
      <tr>
        <!-- TO -->
        <td class="address-card">
          <div class="address-heading-row">
            <span class="address-label">To</span>
          </div>

          <!-- <div class="party-name">JAYESH STAINLESS PRIVATE LIMITED</div>

            <div class="address-content">
              36AAECJ6184F1ZF<br />
              Ground Floor, Sop No 2 5-2-196,<br />
              Distillery Road Ranigunj,<br />
              Secunderabad<br />
              Telangana<br />
              India 500003
            </div> -->
          <span class="address-label">Customer</span>
          <div class="party-name">{{customer_name}}</div>
          <div class="address-content">
            {{customer_address}}<br />
            {{customer_gst}}
          </div>
        </td>

        <!-- SUPPLY TO -->
        <td class="address-card">
          <div class="address-heading-row">
            <span class="address-label">Supply To</span>
          </div>

          <!-- <div class="party-name">Vivek Bio-Products Private Limited</div>

          <div class="address-content">
            plot no 108,TSFPZ-Lingampelli<br />
            Sadashivnagar (M)<br />
            Kamareddy<br />
            Telangana<br />
            India 503145<br />
            36AAICV8996R1ZU
          </div> -->
           <div class="party-name">{{customer_name}}</div>
          <div class="address-content">
            {{customer_address}}<br />
            {{customer_gst}}
          </div>
        </td>

        <!-- DOC DETAILS -->
        <td class="address-card">
          <div class="doc-header">
            <span class="address-label">Doc Type</span>

            <span class="address-label">Sales Quotation </span>
          </div>

          <table class="doc-info-table">
            <tr>
              <td>Doc No</td>
              <td class="text-right">26CORPPORD100017</td>
            </tr>

            <tr>
              <td>Doc Date</td>
              <!-- <td class="text-right">07-04-2026</td> -->
              <td class="text-right">{{order_date}}</td>
            </tr>

            <tr>
              <td>Doc Ref No</td>
              <!-- <td class="text-right"></td> -->
               <td class="text-right">{{ref_no}}</td>
            </tr>

            <tr>
              <td>Doc Ref Date</td>
              <!-- <td class="text-right">07-04-2026</td> -->
               <td class="text-right">{{ref_date}}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <!-- Product Table -->
    <table class="product-table">
      <thead>
        <tr>
          <th class="slno-col text-center">SL NO</th>
          <th class="product-col">Product</th>
          <th class="uom-col text-center">UOM</th>
          <th class="qty-col text-center">Quantity</th>
          <th class="rate-col text-right">Rate</th>
          <th class="discount-col text-right">Discount</th>
          <th class="gst-col text-right">GST</th>
          <th class="value-col text-right">Value</th>
        </tr>
      </thead>

      <tbody>
        <!-- <tr>
          <td class="text-center">1</td>

          <td class="product-cell">
            <div class="product-title">25NB - SS304 - SCH 10S</div>

            <div class="product-subtitle">90DEGREE</div>
          </td>

          <td class="text-center">Nos</td>

          <td class="text-center">20.00</td>

          <td class="text-right">60.00</td>

          <td class="text-right">
            0.00<br />
            <span class="sub-value">(0.00%)</span>
          </td>

          <td class="text-right">
            216<br />
            <span class="sub-value">(18%)</span>
          </td>

          <td class="text-right">1416.00</td>
        </tr> -->

          <tr>
  
  {{items_rows}}

          </tr>
      </tbody>
    </table>

    <!-- Terms and Summary -->
    <div class="invoice-summary-wrapper">
      <!-- Terms Section -->
      <div class="terms-box">
        <div class="terms-title">Terms</div>

        <div class="terms-content">
          1. Goods once sold will not be taken back.<br />

          2. Subject to Hyderabad jurisdiction.<br />

          3. Payment to be made as per agreed terms.
        </div>
      </div>

      <!-- Invoice Summary -->
      <div class="summary-box">
        <table class="summary-table">
          <tr class="summary-highlight">
            <td>Gross</td>
            <!-- <td class="text-right">25,60,000.00</td> -->
             <td class="text-right">{{gross}}</td>
          </tr>

          <tr>
            <td>Net Value</td>
            <!-- <td class="text-right">25,60,000.00</td> -->
             <td class="text-right">{{net_value}}</td>
          </tr>

          <tr>
            <td>CGST</td>
            <!-- <td class="text-right">64,678.41</td> -->
             <td class="text-right">{{cgst}}</td>
          </tr>

          <tr>
            <td>SGST</td>
            <!-- <td class="text-right">64,678.41</td> -->
             <td class="text-right">{{sgst}}</td> 
          </tr>

          <tr>
            <td>Round Off</td>
            <td class="text-right">-0.22</td>
          </tr>

          <tr class="total-row">
            <td>Total Value</td>
            <!-- <td class="text-right">INR 27,16,493.00</td> -->
             <td class="text-right">INR {{total}}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Amount in Words -->
    <div class="amount-words-box">
      <!-- <span class="amount-label">Rupee(s) :</span>

      <span class="amount-text">
        Rupees Twenty Seven Lakhs Sixteen Thousand Four Hundred Ninety Three
        Only
      </span> -->
      <span class="amount-text">
  {{amount_words}}
</span>
    </div>

    <!-- Signature Section -->
    <table class="signature-table">
      <tr>
        <!-- Prepared By -->
        <td class="signature-col">
          <!-- <div class="signature-name">Vaishnavi</div> -->
           <div class="signature-name">{{prepared_by}}</div>

          <div class="signature-role">Prepared By</div>
        </td>

        <!-- Verified By -->
        <td class="signature-col">
         <div class="signature-name">{{verified_by}}</div>

          <div class="signature-role">Verified By</div>
        </td>

        <!-- Approved By -->
        <td class="signature-col">
         <div class="signature-name">{{approved_by}}</div>

          <div class="signature-role">Approved By</div>
        </td>

        <td class="signature-col auth-sign-box">
          <!-- <div class="company-sign">
            For Vivek Bio-Products Private Limited
          </div> -->
          <div class="company-sign">
  For {{company_name}}
</div>

          <!-- <div class="signature-wrapper">
              <div class="signature-name">
                Manche<br />
                Vivek
              </div>

              <div class="digital-sign">
                Digitally signed by<br />
                Manche Vivek<br />
                Date: 2026.05.05<br />
                15:19:48 +05'30'
              </div>
            </div> -->

          <div class="signature-role">(Authorised Signatory)</div>
        </td>
      </tr>
    </table>

    <!-- Footer Note -->
    <div class="footer-note">
      This is a computer generated invoice and does not require a physical
      signature.
    </div>
  </div>
</body>

</html>