<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px 30px;
            color: #333;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #c91761;
            padding-bottom: 12px;
            margin-bottom: 20px;
        }

        .header .title-section h1 {
            margin: 0;
            font-size: 20px;
            color: #c91761;
            text-transform: uppercase;
        }

        .header .title-section p {
            margin: 4px 0 0 0;
            font-size: 11px;
            color: #666;
        }

        .header .logo img {
            height: 45px;
        }

        .section-title {
            font-size: 14px;
            font-weight: bold;
            color: #c91761;
            margin: 20px 0 10px 0;
            padding-bottom: 4px;
            border-bottom: 1px solid #eee;
        }

        .verified-tag {
            display: inline-block;
            font-size: 11px;
            color: #1890ff;
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            border-radius: 4px;
            padding: 2px 8px;
            margin-left: 10px;
            font-weight: normal;
        }

        .verified-tag.green {
            color: #52c41a;
            background: #f6ffed;
            border-color: #b7eb8f;
        }

        .verified-tag.orange {
            color: #fa8c16;
            background: #fff7e6;
            border-color: #ffd591;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 16px;
            font-size: 12px;
        }

        .info-table td {
            padding: 6px 8px;
            border: 1px solid #ccc;
            vertical-align: top;
        }

        .info-table .label {
            font-weight: bold;
            background-color: #fff3f8;
            color: #c91761;
            width: 20%;
            white-space: nowrap;
        }

        .info-table .value {
            width: 30%;
        }

        tr {
            page-break-inside: avoid;
        }

        .no-data {
            text-align: center;
            color: #999;
            font-style: italic;
            padding: 12px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="title-section">
            <h1>Material Verification Report</h1>
            <p>Invoice No: {{invoice_number}}</p>
        </div>
        <div class="logo">
            {{#if logo}}<img src="{{logo}}" alt="Company Logo" />{{/if}}
        </div>
    </div>

    <!-- DOCUMENT VERIFICATION -->
    <div class="section-title">
        Document Verification
        {{#if doc_verifier}}
        <span class="verified-tag">Verified by: {{doc_verifier}} | {{doc_verified_at}}</span>
        {{/if}}
    </div>
    <table class="info-table">
        <tr>
            <td class="label">Is the Material meant for Graviti?</td>
            <td class="value">{{for_graviti}}</td>
            <td class="label">Invoice/DC/BOE Number Available?</td>
            <td class="value">{{invoice_dc_boe_available}}</td>
        </tr>
        <tr>
            <td class="label">Invoice/DC/BOE Number</td>
            <td class="value">{{invoice_number}}</td>
            <td class="label">Purchase Order Available?</td>
            <td class="value">{{po_available}}</td>
        </tr>
        <tr>
            <td class="label">COA/COC, MSDS Available?</td>
            <td class="value">{{coa_coc_msda_available}}</td>
            <td class="label">Material Vendor Status</td>
            <td class="value">{{material_vendor_status}}</td>
        </tr>
        <tr>
            <td class="label">Mfg. Site Address Matching?</td>
            <td class="value">{{manufacture_site_address_matching}}</td>
            <td class="label">Comments</td>
            <td class="value">{{doc_ver_comments}}</td>
        </tr>
    </table>

    <!-- VEHICLE VERIFICATION -->
    <div class="section-title">
        Vehicle Verification
        {{#if veh_verifier}}
        <span class="verified-tag green">Verified by: {{veh_verifier}} | {{veh_verified_at}}</span>
        {{/if}}
    </div>
    <table class="info-table">
        <tr>
            <td class="label">Vehicle Cleanliness</td>
            <td class="value">{{vehicle_cleanliness}}</td>
            <td class="label">Storage in Enclosed Condition</td>
            <td class="value">{{storage_enclose}}</td>
        </tr>
        <tr>
            <td class="label">Storage Condition Available</td>
            <td class="value">{{storage_conditions}}</td>
            <td class="label">Comments</td>
            <td class="value">{{vehicle_storage_comments}}</td>
        </tr>
    </table>

    <!-- MATERIAL VERIFICATION -->
    <div class="section-title">
        Material Verification
        {{#if mat_verifier}}
        <span class="verified-tag orange">Verified by: {{mat_verifier}} | {{mat_verified_at}}</span>
        {{/if}}
    </div>
    <table class="info-table">
        <tr>
            <td class="label">Data Logger Received?</td>
            <td class="value">{{data_logger_received}}</td>
            <td class="label">Vendor Status Label Defaced?</td>
            <td class="value">{{vendor_status_label_defaced}}</td>
        </tr>
        <tr>
            <td class="label">Material Dedusting Status</td>
            <td class="value">{{material_dedusting_status}}</td>
            <td class="label">Seal Integrity of Containers</td>
            <td class="value">{{container_seal_integrity}}</td>
        </tr>
        <tr>
            <td class="label">Comments</td>
            <td class="value" colspan="3">{{material_ver_comments}}</td>
        </tr>
    </table>

    <!-- MATERIAL DETAILS -->
    <div class="section-title">Material Details</div>
    <table class="info-table">
        <tr>
            <td class="label">Material Code</td>
            <td class="value">{{material_code}}</td>
            <td class="label">Name of the Material</td>
            <td class="value">{{material_name}}</td>
        </tr>
        <tr>
            <td class="label">Supplier Name</td>
            <td class="value">{{supplier_name}}</td>
            <td class="label">Manufacturer Name</td>
            <td class="value">{{manufacturer_name}}</td>
        </tr>
        <tr>
            <td class="label">Material Vendor Status</td>
            <td class="value">{{vendor_status}}</td>
            <td class="label">UOM</td>
            <td class="value">{{uom}}</td>
        </tr>
        <tr>
            <td class="label">No. of Batches</td>
            <td class="value">{{no_of_batches}}</td>
            <td class="label"></td>
            <td class="value"></td>
        </tr>
    </table>

    <!-- PO DETAILS -->
    <div class="section-title">PO Details</div>
    <table class="info-table">
        <tr>
            <td class="label">PO Number</td>
            <td class="value">{{po_number}}</td>
            <td class="label">PO Quantity</td>
            <td class="value">{{po_qty}}</td>
        </tr>
        <tr>
            <td class="label">PO Unit Rate (INR)</td>
            <td class="value">{{po_unit_rate}}</td>
            <td class="label">PO Date</td>
            <td class="value">{{po_date}}</td>
        </tr>
        <tr>
            <td class="label">PO Total Amount</td>
            <td class="value">{{po_total_amount}}</td>
            <td class="label"></td>
            <td class="value"></td>
        </tr>
    </table>

    <!-- INVOICE DETAILS -->
    <div class="section-title">Invoice Details</div>
    <table class="info-table">
        <tr>
            <td class="label">CGST</td>
            <td class="value">{{cgst}}</td>
            <td class="label">SGST</td>
            <td class="value">{{sgst}}</td>
        </tr>
        <tr>
            <td class="label">IGST</td>
            <td class="value">{{igst}}</td>
            <td class="label">Invoice Date</td>
            <td class="value">{{invoice_date}}</td>
        </tr>
        <tr>
            <td class="label">Total Invoice Price (Incl. GST)</td>
            <td class="value">{{total_inv_price}}</td>
            <td class="label"></td>
            <td class="value"></td>
        </tr>
    </table>

    <!-- BATCH DETAILS -->
    {{#if has_batches}}
    {{#each batches}}
    <div class="section-title">Batch {{sno}}</div>
    <table class="info-table">
        <tr>
            <td class="label">Mfg. Batch/Lot No</td>
            <td class="value">{{mfg_batch_lot_no}}</td>
            <td class="label">Manufacturing Date</td>
            <td class="value">{{mfg_date}}</td>
        </tr>
        <tr>
            <td class="label">Manufacturing Re-test Date</td>
            <td class="value">{{mfg_retest_date}}</td>
            <td class="label">Manufacturing Expiry Date</td>
            <td class="value">{{mfg_expiry_date}}</td>
        </tr>
        <tr>
            <td class="label">Inhouse Expiry Date</td>
            <td class="value">{{in_house_expiry_date}}</td>
            <td class="label">Inhouse Batch Number</td>
            <td class="value">{{inhouse_batch_number}}</td>
        </tr>
        <tr>
            <td class="label">No. of Containers/Packs Received</td>
            <td class="value">{{containers_packs_received}}</td>
            <td class="label">Invoice Quantity</td>
            <td class="value">{{invoice_quantity}}</td>
        </tr>
        <tr>
            <td class="label">Received Quantity</td>
            <td class="value">{{received_quantity}}</td>
            <td class="label">UOM</td>
            <td class="value">{{uom}}</td>
        </tr>
        <tr>
            <td class="label">Batch Unit Rate</td>
            <td class="value">{{batch_unit_rate}}</td>
            <td class="label">Batch Total Price</td>
            <td class="value">{{batch_total_price}}</td>
        </tr>
        <tr>
            <td class="label">Test to be Performed</td>
            <td class="value">{{test_to_be_performed}}</td>
            <td class="label">Focus MRN #</td>
            <td class="value">{{focus_mrn_no}}</td>
        </tr>
        <tr>
            <td class="label">Focus Batch Unit Rate</td>
            <td class="value">{{focus_batchunit_rate}}</td>
            <td class="label">Comments</td>
            <td class="value">{{comments}}</td>
        </tr>
    </table>
    {{/each}}
    {{else}}
    <div class="section-title">Batch Details</div>
    <p class="no-data">No batch details available.</p>
    {{/if}}
</body>
</html>
