<div class="page-inner" style="display:flex; flex-direction:column; height:100%;">
    <!-- HEADER -->
    <div class="header" style="margin-bottom: 8px;">
        <div class="company-info">
            <strong>SJW SHIVAM JEWELS PVT LTD</strong><br />
            Entrance - BW / BC - 8011<br />
            Bharat Diamond Bourse, BKC,<br />
            Bandra (East),<br />
            Mumbai - 400 051.

        </div>
        <div class="logo">
            <!-- <img src="<%= logoImage %>" alt="Logo" /> -->
        </div>
        <div class="company-info" style="text-align: right;">
            Tel: +91 22 4020 3333<br />
            QBC: 7474-7575-7576<br />
            HSN CODE - 71023910<br />
            GSTIN: 27ABJCS4841G1Z4<br />
            CIN No.: U36990MH2022PTC391262
        </div>
    </div>

    <!-- INFO BAR -->
    <div class="info-bar">
        <div class="footer-row top-row">
            <div class="left">To: <span style="font-weight: 500;">
                    <%= to || '' %>
                </span>
            </div>
            <div class="right">Date: <span class="date-value">
                    <%= date || '' %>
                </span>
            </div>
        </div>

        <div class="footer-row ">
            <div class="left">
                GSTIN: <span class="date-value">
                    <%= gstin || '' %>
                </span>
            </div>
            <div class="right">
                <% if (referenceNo) { %>
                    <span style="font-weight: 600;">( <%= referenceNo %> )</span>
                    <% } %>
                        Copy <%= copyType %>
            </div>

        </div>

        <div class="footer-row bottom-row">
            <div class="left">Through: <span style="font-weight: 600;">
                    <%= through || '' %>
            </div>
            <div class="right">
                </span>
                <div class="info-title">Approval Note For Cut & Polished Diamond</div>
            </div>
        </div>

    </div>

    <!-- TABLE -->
    <div class="table-wrapper">
        <!-- <div class="description-watermark-bg" style="position: absolute; top: 30px; "></div> -->
        <table class="custom-table">
            <thead>
                <tr>
                    <th class="col-sr">SR.NO.</th>
                    <th class="col-shape">SHAPE</th>
                    <th class="col-desc">DESCRIPTION</th>
                    <th class="col-pcs">PCS</th>
                    <th class="col-carat">CARAT</th>
                    <th class="col-rate">RATE US $</th>
                    <% if (showAmount) { %> <!--Don't show amount column in parcel print-->
                        <th class="col-amount">AMOUNT</th>
                        <% } %>
                            <th class="col-remark">REMARKS</th>

                </tr>
            </thead>
            <tbody>
                <% for (let i=0; i < pageRows.length; i++) { %>
                    <% const row=pageRows[i]; %>
                        <tr>
                            <td class="col-sr">
                                <%= row.RN %>
                            </td>
                            <td class="col-shape">
                                <%= row.Shape %>
                            </td>
                            <td class="col-desc left">
                                <%= row.Descr %>
                            </td>
                            <td class="col-pcs">
                                <%= row.Pcs %>
                            </td>
                            <td class="col-carat">
                                <%= row.Carat %>
                            </td>
                            <td class="col-rate">
                                <%= row.Rate %>
                            </td>
                            <% if (showAmount) { %>
                                <td class="col-amount">
                                    <%= row.Amount %>
                                </td>
                                <% } %>
                                    <td class="col-remark left">
                                        <%= row.Remark %>
                                    </td>
                        </tr>
                        <% } %>

                            <% for (let j=pageRows.length; j < perPage; j++) { %>

                                <tr class="blank-row">
                                    <td class="col-sr">&nbsp;</td>
                                    <td class="col-shape">&nbsp;</td>
                                    <td class="col-desc">&nbsp;</td>
                                    <td class="col-pcs">&nbsp;</td>
                                    <td class="col-carat">&nbsp;</td>
                                    <td class="col-rate">&nbsp;</td>
                                    <% if (showAmount) { %>
                                        <td class="col-amount">&nbsp;</td>
                                        <% } %>
                                            <td class="col-remark">&nbsp;</td>
                                </tr>
                                <% } %>

                                    <% const total=isLastPage ? Summary : {}; %>
                                        <tr class="total-row">
                                            <td colspan="2" class="col-sr col-shape">Total</td>
                                            <td class="col-desc">&nbsp;</td>
                                            <td class="col-pcs">
                                                <%= total?.Pcs || '' %>
                                            </td>
                                            <td class="col-carat">
                                                <%= total?.Carat || '' %>
                                            </td>
                                            <td class="col-rate">
                                                <%= total?.Rate || '' %>
                                            </td>
                                            <% if (showAmount) { %>
                                                <td class="col-amount">
                                                    <%= total?.Amount || '' %>
                                                </td>
                                                <% } %>
                                                    <td class="col-remark">
                                                        <%= total?.Remark || '' %>
                                                    </td>
                                        </tr>
            </tbody>
        </table>

    </div>

    <!-- FOOTER (will sit at the bottom of the half due to margin-top:auto) -->
    <div class="footer-bar">
        <div class="footer-row top-row">
            <div class="left">Received goods as per conditions overleaf</div>
            <div class="right">For <strong>SJW SHIVAM JEWELS PVT LTD</strong></div>
        </div>

        <div class="footer-row ">
            <div style="width: 33.33px;">
            </div>
            <div style="padding-top: 25px; font-size: 8px;">
                <span style=" text-align: right; margin-bottom: 5px;">
                    <strong>
                        <%= userName %> / <%= partyHoldUserName %>
                    </strong>
            </div>
        </div>

        <div class="footer-row bottom-row">
            <div class="left">Receiver’s Signature</div>
            <div class="center">Customer’s Signature</div>
            <div class="right">
                </span>
                <div>Authorised Signatory</div>
            </div>
        </div>

    </div>

    <div class="footer-bar" style="margin-top: 2px;">
        <div class="footer-row">
            <div class="left">
                <span>
                    <i class="fa-solid fa-globe"></i>
                    sj.world
                </span>
            </div>

            <div class="right">
                <span>
                    <i class="fa-regular fa-envelope"></i>
                    <%= emailId %>
                </span>
            </div>
        </div>
    </div>
</div>