<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Purchase Order - {{PO_NUMBER}}</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

    body {
      background: #f2f2f2;
      padding: 20px;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .po-container {
      width: 1000px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border: 1px solid #000;
    }

    /* ── COMMON ── */
    table           { width: 100%; border-collapse: collapse; }
    td, th          { border: 1px solid #cfcfcf; padding: 5px 8px; vertical-align: top; font-size: 13px; }
    .text-center    { text-align: center; }
    .text-right     { text-align: right; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       HEADER  (logo left, company centre)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .top-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .logo            { width: 100px; height: auto; display: block; }

    .company-details { flex: 1; text-align: center; margin-right: 100px; }
    .company-details h1 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
    .company-details p  { font-size: 13px; line-height: 1.4; color: #333; }

    /* ── TITLE ── */
    .po-title {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1px;
      margin: 10px 0;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ADDRESS ROW  (3 equal cells)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .address-table              { table-layout: fixed; margin-top: 10px; }
    .address-card               { width: 33.33%; border: 1px solid #cfcfcf; padding: 8px; vertical-align: top; }
    .address-title              { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px; }
    .address-card .co-name      { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; line-height: 1.4; }
    .address-card .addr-text    { font-size: 13px; color: #333; line-height: 1.5; }
    .address-card .gst-text     { margin-top: 5px; font-size: 13px; color: #222; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       INFO ROW  (PO details | Vendor details | Dept / PR)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .info-table   { table-layout: fixed; margin-top: 12px; }
    .info-card    { vertical-align: top; border: 1px solid #cfcfcf; padding: 10px 12px; }
    .po-card      { width: 30%; }
    .vendor-card  { width: 42%; }
    .dept-card    { width: 28%; }

    .info-title   { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 7px; }
    .info-text    { font-size: 13px; color: #333; line-height: 1.7; }
    .info-text strong { color: #111; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ITEMS TABLE
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .product-table               { table-layout: fixed; margin-top: 12px; }
    .product-table th            { background: #f3f3f3; border: 1px solid #cfcfcf; padding: 7px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #444; letter-spacing: 0.4px; }
    .product-table td            { border: 1px solid #d8d8d8; padding: 7px 10px; font-size: 13px; color: #222; line-height: 1.4; }

    .col-sl   { width: 4%; }
    .col-code { width: 12%; }
    .col-name { width: 28%; }
    .col-desc { width: 22%; }
    .col-uom  { width: 6%; }
    .col-qty  { width: 7%; }
    .col-rate { width: 10%; }
    .col-amt  { width: 11%; }

    .item-code-val { font-weight: 700; color: #111; }
    .empty-row td  { height: 30px; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       TERMS + SUMMARY  (side by side)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .bottom-wrapper            { width: 100%; margin-top: 12px; display: table; table-layout: fixed; }
    .terms-box, .summary-box   { display: table-cell; vertical-align: top; border: 1px solid #cfcfcf; }
    .terms-box                 { width: 55%; padding: 12px 14px; }
    .summary-box               { width: 45%; }

    .section-title             { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #666; letter-spacing: 0.7px; margin-bottom: 8px; }
    .terms-content             { font-size: 13px; line-height: 1.8; color: #333; }

    .summary-table             { width: 100%; border-collapse: collapse; }
    .summary-table td          { padding: 7px 12px; font-size: 13px; color: #222; border: 1px solid #d8d8d8; }
    .summary-table tr:last-child td { border-bottom: none; }
    .summary-highlight td      { font-weight: 700; }
    .total-row td              { font-size: 14px; font-weight: 700; background: #f5f5f5; color: #111; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       AMOUNT IN WORDS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .amount-words-box { margin-top: 12px; border: 1px solid #cfcfcf; padding: 9px 14px; font-size: 13px; }
    .amount-label     { font-weight: 700; color: #111; }
    .amount-text      { color: #333; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       AUTHORISED SIGNATORY  (single right box)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .signatory-box      { margin-top: 14px; border: 1px solid #cfcfcf; padding: 12px 14px; text-align: right; min-height: 70px; }
    .signatory-for      { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 26px; }
    .signatory-role     { font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: 0.6px; }

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

    @media print {
      body { background: #fff; padding: 0; }
      .po-container { border: none; width: 100%; }
    }
  </style>
</head>

<body>
<div class="po-container">

  <!-- ── HEADER ── -->
  <div class="top-header">
    <img
      src="{{COMPANY_LOGO}}"
      class="logo"
      alt="Logo"
      onerror="this.style.visibility='hidden'"
    />
    <div class="company-details">
      <h1>{{COMPANY_NAME}}</h1>
      <p>{{COMPANY_ADDRESS_LINE1}}, {{COMPANY_ADDRESS_LINE2}}</p>
      <p>PAN : {{COMPANY_PAN}} &nbsp;|&nbsp; GSTIN : {{COMPANY_GST}}</p>
      <p>CIN : {{COMPANY_CIN}}</p>
      <p>{{COMPANY_EMAIL}} &nbsp;|&nbsp; {{COMPANY_PHONE}}</p>
    </div>
  </div>

  <!-- ── TITLE ── -->
  <div class="po-title">PURCHASE ORDER</div>

  <!-- ── ADDRESS ROW ── -->
  <table class="address-table">
    <tr>
      <!-- Vendor Address -->
      <td class="address-card">
        <div class="address-title">Vendor (To)</div>
        <div class="co-name">{{VENDOR_NAME}}</div>
        <div class="addr-text">{{VENDOR_ADDRESS}}</div>
        <div class="gst-text"><strong>GSTIN :</strong> {{VENDOR_GST}}</div>
      </td>

      <!-- Supply To -->
      <td class="address-card">
        <div class="address-title">Supply To</div>
        <div class="co-name">{{COMPANY_NAME}}</div>
        <div class="addr-text">{{COMPANY_ADDRESS_LINE1}}, {{COMPANY_ADDRESS_LINE2}}</div>
        <div class="gst-text"><strong>GSTIN :</strong> {{COMPANY_GST}}</div>
      </td>

      <!-- Bill To -->
      <td class="address-card">
        <div class="address-title">Bill To</div>
        <div class="co-name">{{COMPANY_NAME}}</div>
        <div class="addr-text">{{COMPANY_ADDRESS_LINE1}}, {{COMPANY_ADDRESS_LINE2}}</div>
        <div class="gst-text"><strong>GSTIN :</strong> {{COMPANY_GST}}</div>
      </td>
    </tr>
  </table>

  <!-- ── INFO ROW ── -->
  <table class="info-table">
    <tr>
      <!-- PO Details -->
      <td class="info-card po-card">
        <div class="info-title">PO Details</div>
        <div class="info-text">
          <strong>PO No :</strong> {{PO_NUMBER}}<br />
          <strong>PO Date :</strong> {{PO_DATE}}<br />
          <strong>Due Date :</strong> {{PO_DUE_DATE}}<br />
          <strong>PR No :</strong> {{PR_NUMBER}}
        </div>
      </td>

      <!-- Vendor Details -->
      <td class="info-card vendor-card">
        <div class="info-title">Vendor Details</div>
        <div class="info-text">
          <strong>Name :</strong> {{VENDOR_NAME}}<br />
          <strong>Phone :</strong> {{VENDOR_PHONE}}<br />
          <strong>Email :</strong> {{VENDOR_EMAIL}}<br />
          <strong>GSTIN :</strong> {{VENDOR_GST}}
        </div>
      </td>

      <!-- Department -->
      <td class="info-card dept-card">
        <div class="info-title">Other Details</div>
        <div class="info-text">
          <strong>Department :</strong> {{DEPARTMENT}}<br />
          <strong>Requested By :</strong> {{REQUESTED_BY}}
        </div>
      </td>
    </tr>
  </table>

  <!-- ── ITEMS TABLE ── -->
  <table class="product-table">
    <thead>
      <tr>
        <th class="col-sl text-center">Sl.</th>
        <th class="col-code">Item Code</th>
        <th class="col-name">Item Name</th>
        <th class="col-desc">Description</th>
        <th class="col-uom text-center">UOM</th>
        <th class="col-qty text-center">Qty</th>
        <th class="col-rate text-right">Rate (₹)</th>
        <th class="col-amt text-right">Amount (₹)</th>
      </tr>
    </thead>
    <tbody>
      {{ITEMS_ROWS}}
      <tr class="empty-row"><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr class="empty-row"><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>

  <!-- ── TERMS + SUMMARY ── -->
  <div class="bottom-wrapper">
    <div class="terms-box">
      <div class="section-title">Terms &amp; Conditions</div>
      <div class="terms-content">{{TERMS_CONTENT}}</div>
    </div>
    <div class="summary-box">
      <table class="summary-table">
        <tr class="summary-highlight">
          <td>Gross Amount</td>
          <td class="text-right">{{GROSS_AMOUNT}}</td>
        </tr>
        <tr>
          <td>Net Value</td>
          <td class="text-right">{{NET_VALUE}}</td>
        </tr>
        <tr class="total-row">
          <td>Total Value</td>
          <td class="text-right">INR {{TOTAL_VALUE}}</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- ── AMOUNT IN WORDS ── -->
  <div class="amount-words-box">
    <span class="amount-label">Rupees in Words : </span>
    <span class="amount-text">{{AMOUNT_IN_WORDS}} Only</span>
  </div>

  <!-- ── AUTHORISED SIGNATORY ── -->
  <div class="signatory-box">
    <div class="signatory-for">For {{COMPANY_NAME}}</div>
    <div class="signatory-role">Authorised Signatory</div>
  </div>

  <!-- ── FOOTER ── -->
  <div class="footer-note">
    This is a computer generated document and does not require a physical signature.
  </div>

</div>
</body>
</html>