<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Quotation Invoice</title>

  <style>
    /* Base page */
    body{
      margin:0;
      background:#ffffff;
      padding:30px;
      font-family: Arial, sans-serif;
    }

    /* Watermark overlay — visible even over white table cells */
    .page-with-watermark{ position: relative; }

    .page-with-watermark > *{ position: relative; z-index: 1; }

    @media print{
      .page-with-watermark{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    /* Outer container (centered 900px table) */
    .outer{
      width:900px;
      margin:0 auto;
      border-collapse:collapse;
      background: url("<%= appUrl %>/images/watermark.png") no-repeat center center;
      background-size: 60% auto;
    }
    .outer-td{
      position: relative;
      padding:24px;
      text-align:center;
    }

    /* Brand header */
    .brand{
      width:70%;
      margin:0 auto;
      border-collapse:collapse;
    }
    .brand-logo{
      height:130px; width:auto; display:block;
    }
    .brand-right{
      vertical-align:middle; text-align:left;
    }
    .brand-title{
      font-size:28px; color:#00893B; margin:0; letter-spacing:1px;
    }
    .brand-line{ font-size:14px; margin:6px 0 0; color:#334155; }
    .brand-line + .brand-line{ margin-top:8px; color:#1f2937; }
    .brand-link{ color:#0ea5e9; text-decoration:none; }

    /* Section heading */
    .section-title{
      text-align:center; margin:16px 0 0; font-size:22px; color:#0b2545;
    }

    /* Info table (customer/invoice info) */
    .info{
      width:100%; margin:16px 0 0; border-collapse:collapse;
    }
    .info-left{ width:70%; vertical-align:top; padding-right:12px; text-align:left; }
    .info-right{ width:30%; vertical-align:top; padding-left:12px; text-align:left; }
    .info p{ margin:4px 0 0; font-size:14px; }
    .info p:first-child{ margin-top:0; }

    /* Product table */
    .product-table{
      width:100%;
      border-collapse:collapse;
      margin-top:16px;
      background:#ffffff;
    }
    .product-table th{
      background:#f0f0f0; color:#000; text-align:center; padding:8px;
    }
    .product-table td{
      text-align:center; padding:8px;
    }
    /* If you rely on border="1" you can keep it; otherwise uncomment:
    .product-table, .product-table th, .product-table td{
      border:1px solid #000;
    } */

    /* Totals block */
    .totals{
      margin-top:16px; text-align:right; font-size:14px;
    }
    .totals hr{
      border:0; border-top:1px solid #ccc; margin:8px 0;
    }
    .totals .grand{ margin:0; font-size:16px; }

    /* Note + terms */
    .note{ margin-top:12px; font-size:14px; text-align:left; }
    .terms{ margin-top:12px; text-align:left; }
    .terms ul{ margin:6px 0 0 18px; padding:0; }
    .terms li{ margin:3px 0; }

    /* Footer image */
    .footer{
      text-align:center; margin-top:24px;
    }
    .footer img{
      display:block; margin:0 auto; width:70%; height:55px;
    }
  </style>
</head>

<body>
  <div class="page-with-watermark">
    <!-- Centered container -->
    <table role="presentation" class="outer" cellpadding="0" cellspacing="0">
      <tr>
        <td class="outer-td">
          <!-- Brand Header -->
          <table role="presentation" class="brand" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <img src="<%= appUrl %>/images/sbm_logo.png" alt="Company Logo" class="brand-logo">
              </td>
              <td class="brand-right">
                <h1 class="brand-title">Sharif Bearing &amp; Machineries</h1>
                <p class="brand-line">89, Nawabpur Road, Nawabpur, Dhaka-1100, Bangladesh.</p>
                <p class="brand-line">Tel: +88-02-47117674, 223386738&nbsp;&nbsp;|&nbsp;&nbsp;Cell: 01711-843583, 01300-027111</p>
                <p class="brand-line" style="text-decoration:none;">E-mail: sharifbearing@gmail.com,&nbsp;nawabpur.sharifbearing@gmail.com</p>
                <p class="brand-line">Website: <a href="http://www.sbmbd.net" class="brand-link">www.sbmbd.net</a></p>
              </td>
            </tr>
          </table>

          <h2 class="section-title">Quotation Invoice</h2>

          <!-- Customer / Invoice Info -->
          <table role="presentation" class="info" cellpadding="0" cellspacing="0">
            <tr>
              <td class="info-left">
                <p><strong>Customer ID :</strong> <%= sale.customer_code %></p>
                <p><strong>Customer Name :</strong> <%= sale.customer_name %></p>
                <p><strong>Institution Name :</strong> <%= sale.customer_institution_name %></p>
                <p><strong>Customer Address :</strong> <%= sale.customer_address %></p>
                <p><strong>Customer Mobile :</strong> <%= sale.customer_mobile_no %></p>
              </td>
              <td class="info-right">
                <p><strong>Quotation By :</strong> <%= sale.employee_name %></p>
                <p><strong>Invoice No :</strong> <%= sale.sale_invoice %></p>
                <p><strong>Date &amp; Time :</strong> <%= moment(sale.sale_created_isodt).format(dateTimeFormat) %></p>
              </td>
            </tr>
          </table>

          <!-- Product Table -->
          <table role="presentation" class="product-table" cellpadding="8" cellspacing="0" border="1">
            <thead>
              <tr>
                <th>SL</th>
                <th>Category</th>
                <th>Product</th>
                <th>Brand</th>
                <th>Unit</th>
                <th>Unit Price</th>
                <% if (showDetailedView) { %>
                  <th>Qty</th>
                  <th>Total</th>
                <% } %>
              </tr>
            </thead>
            <tbody>
              <% sale.details.forEach((item, index) => { %>
                <tr>
                  <td><%= index + 1 %></td>
                  <td><%= item.prod_cat_name || '' %></td>
                  <td><%= item.prod_name || '' %></td>
                  <td><%= item.prod_brand_name || '' %></td>
                  <td><%= item.prod_unit_name || '' %></td>
                  <td><%= format(parseFloat(item.sale_rate).toFixed(2)) %></td>
                  <% if (showDetailedView) { %>
                    <td><%= item.sale_qty %></td>
                    <td><%= format(parseFloat(item.sale_prod_total).toFixed(2)) %></td>
                  <% } %>
                </tr>
              <% }); %>
            </tbody>
          </table>

          <% if (showDetailedView) { %>
            <!-- Totals -->
            <div class="totals">
              <p><strong>Sub Total :</strong> <%= format(parseFloat(sale.sale_subtotal_amount).toFixed(2)) %></p>
              <p><strong>Transport Cost :</strong> <%= format(parseFloat(sale.sale_transport_cost).toFixed(2)) %></p>
              <p><strong>Vat :</strong> <%= format(parseFloat(sale.sale_vat_amount).toFixed(2)) %></p>
              <p><strong>Discount :</strong> <%= format(parseFloat(sale.sale_discount_amount).toFixed(2)) %></p>
              <hr>
              <p class="grand"><strong>Total :</strong> <%= format(parseFloat(sale.sale_total_amount).toFixed(2)) %></p>
            </div>
            <p class="note"><strong>In Word :</strong> <%= convertNumberToWords(sale.sale_total_amount) %> only</p>
          <% } %>

          <!-- Note -->
          <p class="note"><strong>Note :</strong> <%= sale.sale_note || 'N/A' %></p>

          <!-- Terms & Conditions -->
          <% if (sale.checkbox_options) { %>
            <% const terms = JSON.parse(sale.checkbox_options); %>
            <% if (terms.length > 0) { %>
              <div class="terms">
                <strong>Terms &amp; Conditions:</strong>
                <ul>
                  <% terms.forEach(term => { %>
                    <li><%= term %></li>
                  <% }); %>
                </ul>
              </div>
            <% } %>
          <% } %>

          <% if (footerChoice !== 'none') { %>
            <% const footerUrl = `${appUrl}/images/${footerChoice}.jpeg`; %>
            <div class="footer">
              <img src="<%= footerUrl %>" alt="Footer">
            </div>
          <% } %>

        </td>
      </tr>
    </table>
  </div>
</body>
</html>
