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

<head>
    <meta charset="UTF-8">
    <title>Packing List</title>
    <style>
        @page {
            size: A4;
            margin: 5mm;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        .page {
            position: relative;
            width: 210mm;
            height: 315mm;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            page-break-after: always;
            box-sizing: border-box;
            padding: 0;
            z-index: 1;
        }

        .page:last-child {
            page-break-after: auto;
        }

        .page::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 70%;
            filter: opacity(0.5);
            opacity: 0.10;
            z-index: 0;
            pointer-events: none;
        }

        .watermark {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('<%= watermarkImage %>') no-repeat center center;
            background-size: 70%;
            filter: opacity(0.5);
            z-index: 0;
            pointer-events: none;
        }

        .header {
            height: 80px;
            width: 106%;
        }

        .header img {
            width: 100%;
            height: 100%;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background: white;
        }

        .footer-content {
            height: 110px;
        }

        .footer-img {
            display: block;
            width: 100%;
            height: 85%;
        }

        .content {
            flex: 1;
            box-sizing: border-box;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }

        .company-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
        }

        .details {
            width: 100%;
            text-align: right;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            padding-top: 15px;
        }

        th {
            border: 1px solid #000;
            padding: 2px;
            text-align: center;
            word-wrap: break-word;
            white-space: normal;
            font-size: 10px;
            line-height: 1.1;
        }

        td {
            border: 1px solid #000;
            padding: 2px;
            text-align: center;
            font-size: 10px;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
        }

        .bold {
            font-weight: bold;
        }

        .title {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        p {
            margin-top: 5px;
        }

        .acknowledgement-block {
            page-break-inside: avoid;
            break-inside: avoid;
            margin-top: 10px;
        }

        .acknowledgement-content {
            width: 85%;
            margin: 0 auto;
            page-break-inside: avoid;
            break-inside: avoid;
            text-align: left;
        }

        .acknowledgement-content h3 {
            font-size: 14px;
            margin-top: 20px;
            text-align: center;
        }

        .acknowledgement-content p,
        .acknowledgement-content li {
            font-size: 14px;
        }

        .ack-row {
            display: flex;
            align-items: flex-start;
            font-size: 11px;
            margin-bottom: 4px;
        }

        .ack-number {
            width: 20px;
            flex-shrink: 0;
        }

        .signature-section {
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
            width: 100%;
        }

        .signature-box {
            width: 40%;
            text-align: center;
        }

        .tax-table {
            width: 106%;
            border-collapse: collapse;
            font-size: 11px;
            font-family: Arial, sans-serif;
            color: #000;
            padding-top: 15px;
        }

        .tax-table td,
        .tax-table th {
            border: 1px solid #000;
            padding: 2px;
            font-size: 10px;
            line-height: 1.1;
        }

        .tax-table th {
            background-color: rgb(219, 217, 217);
            font-weight: bold;
            text-align: center;
            word-wrap: break-word;
            white-space: normal;
        }

        .tax-table td {
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
        }

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

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

        .tax-table .amount-words {
            font-size: 10px;
            white-space: normal;
        }

        .tax-table .bold {
            font-weight: bold;
            background-color: rgb(219, 217, 217);
        }

        .field-line {
            display: inline-block;
            min-width: 150px;
            border-bottom: 1px solid #000;
            padding-left: 5px;
            text-align: left;
        }

        .page-number {
            position: absolute;
            bottom: 95px;
            right: 10px;
            font-size: 11px;
            font-weight: bold;
            color: #000;
            background: #fff;
            padding: 9px 3px;
            z-index: 99999;
        }

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

        td,
        th {
            border: 1px solid black;
            padding: 3px 6px;
            vertical-align: top;
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }

        .no-border {
            border: none !important;
        }

        .green-text {
            color: #006600;
            font-weight: bold;
        }

        .logo-bar {
            height: 28px;
            text-align: center;
        }

        .logo-bar .blank-logo {
            display: inline-block;
            width: 180px;
            height: 16px;
            margin-top: 6px;
        }

        .title-bar {
            border: 1px solid black;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            padding: 4px;
        }

        .shipper-table td {
            vertical-align: top;
        }

        .shipper-cell {
            width: 55%;
            text-align: left;
        }

        .meta-cell {
            width: 45%;
        }

        .meta-table td {
            border: none;
            padding: 2px 4px;
        }

        .meta-table .lbl {
            font-weight: bold;
            width: 45%;
        }

        .consignee-cell {
            height: 90px;
            text-align: left;
        }

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

        .items-table th {
            font-weight: bold;
            text-align: center;
            background: #fff;
        }

        .items-table td {
            text-align: center;
        }

        .items-table .desc-col {
            text-align: left;
        }

        .items-table .header-row td {
            font-weight: bold;
        }

        .items-table tr {
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .totals-row td {
            font-weight: bold;
            background: #fff;
        }

        .hsn-table {
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .hsn-table td {
            padding: 4px 6px;
        }

        .footer-block {
            padding: 6px;
            font-size: 11.5px;
        }

        .footer-block div {
            margin: 2px 0;
        }

        .ack-page {
            page-break-before: always;
            break-before: page;
        }

        .ack-section {
            page-break-inside: avoid;
            break-inside: avoid;
        }
    </style>
</head>

<body>
    <% const rowsPerPage=40; const totalPages=Math.max(1, Math.ceil(diamonds.length / rowsPerPage)); const
        lastPageRows=diamonds.length % rowsPerPage || rowsPerPage; const acknowledgementRequiredRows=25; const
        remainingRows=rowsPerPage - lastPageRows; const moveAcknowledgementToNextPage=remainingRows <
        acknowledgementRequiredRows; const finalTotalPages=totalPages + (moveAcknowledgementToNextPage ? 1 : 0); %>

        <% for (let p=0; p < totalPages; p++) { const pageDiamonds=diamonds.slice(p * rowsPerPage, (p + 1) *
            rowsPerPage); const isLastStonePage=p===totalPages - 1; %>
            <div class="page">
                <% if (isHeaderFooter) { %>
                    <div class="watermark"></div>
                    <% } %>
                        <div class="header" style="padding-bottom: 10px;">
                            <% if (isHeaderFooter) { %><img src="<%= headerImage %>" alt="Header Image">
                                <% } %>
                        </div>

                        <div class="content">
                            <div class="challan-wrap">
                                <% if (p===0) { %>
                                    <div class="title-bar">PACKING LIST</div>
                                    <table class="shipper-table">
                                        <tr>
                                            <td class="shipper-cell" rowspan="4">
                                                <div class="bold">Shipper Address:</div>
                                                <div>SJW SHIVAM JEWELS PRIVATE LIMITED</div>
                                                <div>29/8, Vasta Devdi Road,</div>
                                                <div>Near Torrent Power Office,</div>
                                                <div>Lal Darwaja , Katargam</div>
                                                <div>Surat-395004(Gujarat)India</div>
                                                <div>GSTIN No:24ABJCS4841G1ZA</div>
                                            </td>
                                            <td style="width:25%;">
                                                <div class="bold">DELIVERY CHALLAN NO</div>
                                            </td>
                                            <td style="width:20%;">
                                                <div class="bold">DATE:</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="yellow center">
                                                <%= jobNo %>
                                            </td>
                                            <td class="yellow center">
                                                <%= date %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div class="bold" style="padding: 3px 0; text-align: left;">Transporter:
                                                    <span class="yellow">MALCA-AMIT</span>
                                                </div>
                                                <div class="bold" style="padding: 3px 0; text-align: left;">Courier
                                                    Charge by Client:</div>
                                                <div class="bold" style="padding: 3px 0; text-align: left;">Place of
                                                    Supply: <span class="yellow">Surat</span></div>
                                            </td>
                                        </tr>
                                    </table>

                                    <table>
                                        <tr>
                                            <td class="consignee-cell">
                                                <div class="bold">Consignee Address:</div>
                                                <div>De Beers India Pvt. Ltd.</div>
                                                <div>Unit 901 to 906 , 9th Floor,</div>
                                                <div>International Business Centre,</div>
                                                <div>Surat Dumas Road,</div>
                                                <div>Surat-395007,</div>
                                                <div>Gujarat, India.</div>
                                                <div>TEL.: 0261-4062000</div>
                                                <div>GST - 24AAACD1900D1ZK</div>
                                            </td>
                                        </tr>
                                    </table>
                                    <% } %>

                                        <table class="items-table">
                                            <thead>
                                                <tr class="header-row">
                                                    <th style="width:6%;">Sr.No.</th>
                                                    <th style="width:24%;">Description of Goods</th>
                                                    <th style="width:8%;">Pcs</th>
                                                    <th style="width:13%;">Quantity / Carat</th>
                                                    <th style="width:20%;">Unit Price</th>
                                                    <th style="width:20%;">Total Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <% pageDiamonds.forEach(function(row, i) { %>
                                                    <tr class="item-row">
                                                        <td>
                                                            <%= (p * rowsPerPage) + i + 1 %>
                                                        </td>
                                                        <td class="desc-col">
                                                            <%= row.STONE_ID %>
                                                        </td>
                                                        <td>1</td>
                                                        <td>
                                                            <%= row.CARAT %>
                                                        </td>
                                                        <td class="right">
                                                            <%= Number(row.PRICE).toFixed(2) %>
                                                        </td>
                                                        <td class="right">
                                                            <%= Math.round(Number(row.AMOUNT) *
                                                                Number(conversion)).toFixed(2) %>
                                                        </td>
                                                    </tr>
                                                    <% }); %>
                                                        <% if (isLastStonePage) { %>
                                                            <tr class="totals-row">
                                                                <td class="right" colspan="2">TOTAL</td>
                                                                <td>
                                                                    <%= diamonds.length %>
                                                                </td>
                                                                <td>
                                                                    <%= totalCarat %>
                                                                </td>
                                                                <td class="right">
                                                                    <%= totalPrice %>
                                                                </td>
                                                                <td class="right">
                                                                    <%= totalRapAmount %>
                                                                </td>
                                                            </tr>
                                                            <% } %>
                                            </tbody>
                                        </table>

                                        <% if (isLastStonePage) { %>
                                            <table class="hsn-table">
                                                <tr>
                                                    <td style="width:40%;" class="bold">HSN Code - "7102-3910"</td>
                                                    <td style="width:30%;" class="bold">IGST(0.75%)</td>
                                                    <td style="width:30%;" class="right">
                                                        <%= igst %>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="no-border"></td>
                                                    <td class="bold">Total Tax</td>
                                                    <td class="right">
                                                        <%= totalReceivableAmount %>
                                                    </td>
                                                </tr>
                                            </table>
                                            <% } %>
                            </div>

                            <% if (isLastStonePage && !moveAcknowledgementToNextPage) { %>
                                <div class="footer-block">
                                    <div><span class="bold">Amount Chargeable (In Words)</span></div>
                                    <div style="font-weight: bold;">Rs &nbsp;: &nbsp;<%= amountInWords %>
                                    </div>
                                    <div style="font-weight: bold;">Number of Packages: <%= diamonds.length %>
                                    </div>
                                </div>

                                <!-- <div style="display: flex; padding: 10px;">
                                    <div style="width: 50%; padding-bottom: 50px;">
                                        <div class="bold">Receiver</div>
                                        <div>De Beers India Pvt Ltd</div>
                                    </div>
                                    <div style="width: 50%; padding-bottom: 50px;">
                                        <div class="bold">Sender: &nbsp; SJW SHIVAM JEWELS PRIVATE LIMITED</div>
                                    </div>
                                </div> -->

                                <%- include('partials/acknowledgement') %>
                                    <% } %>
                        </div>

                        <div class="footer">
                            <% if (isHeaderFooter) { %><img src="<%= footerImage %>" class="footer-img">
                                <% } %>
                        </div>

                        <span class="page-number">Page <%= p + 1 %> of <%= finalTotalPages %></span>
            </div>
            <% } %>

                <% if (moveAcknowledgementToNextPage) { %>
                    <div class="page ack-page">
                        <div class="header">
                            <% if (isHeaderFooter) { %><img src="<%= headerImage %>" alt="Header Image">
                                <% } %>
                        </div>

                        <div class="content">
                            <div class="footer-block">
                                <div><span class="bold">Amount Chargeable (In Words)</span></div>
                                <div style="font-weight: bold;">Rs &nbsp;: &nbsp;<%= amountInWords %>
                                </div>
                                <div style="font-weight: bold;">Number of Packages: <%= diamonds.length %>
                                </div>
                            </div>

                            <div style="display: flex; padding: 10px;">
                                <div style="width: 50%; padding-bottom: 50px;">
                                    <div class="bold">Receiver</div>
                                    <div>De Beers India Pvt Ltd</div>
                                </div>
                                <div style="width: 50%; padding-bottom: 50px;">
                                    <div class="bold">Sender: &nbsp; SJW SHIVAM JEWELS PRIVATE LIMITED</div>
                                </div>
                            </div>

                            <%- include('partials/acknowledgement') %>
                        </div>

                        <div class="footer">
                            <% if (isHeaderFooter) { %><img src="<%= footerImage %>" class="footer-img">
                                <% } %>
                        </div>

                        <span class="page-number">Page <%= totalPages + 1 %> of <%= finalTotalPages %></span>
                    </div>
                    <% } %>
</body>

</html>