<style>

body{
    font-family: DejaVu Sans;
    font-size:11px;
    color:#333;
    margin:0;
    padding:0;
    margin-bottom:120px;
}

/* HEADER */

.header-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:22px;
    border-bottom:2px solid #f2531e;
}

.header-table td{
    vertical-align:top;
    padding:0 0 12px 0;
}

.company{
    width:60%;
    font-size:12px;
    line-height:1.45;
}

.document-title{
    width:40%;
    text-align:right;
    font-size:12px;
    line-height:1.45;
}

.document-title h2{
    margin:0 0 6px 0;
    color:#f2531e;
    font-size:18px;
    font-weight:700;
}

/* CUSTOMER + DETAILS */

.info-table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0 20px 0;
}

.info-table td{
    border:1px solid #d9d9d9;
    padding:12px 14px;
    vertical-align:top;
}

.billto-col{
    width:55%;
}

.details-col{
    width:45%;
}

.section-title{
    font-weight:700;
    margin-bottom:8px;
    font-size:12px;
}

.billto-content,
.details-content{
    line-height:1.55;
    font-size:11px;
}

/* ITEMS */

.items-table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
    table-layout:fixed;
}

.items-table col.col-product{ width:48%; }
.items-table col.col-sku{ width:16%; }
.items-table col.col-qty{ width:10%; }
.items-table col.col-rate{ width:13%; }
.items-table col.col-total{ width:13%; }

.items-table thead th{
    background:#f2531e;
    color:#fff;
    border:1px solid #d96a40;
    padding:8px 10px;
    font-size:11px;
    font-weight:700;
    text-align:left;
}

.items-table tbody td{
    border:1px solid #ddd;
    padding:8px 10px;
    font-size:11px;
    vertical-align:top;
}

.items-table .product-cell{
    text-align:left;
    line-height:1.45;
}

.items-table .product-name{
    display:block;
    font-weight:700;
    margin:0 0 2px 0;
}

.items-table .product-comment{
    display:block;
    margin-top:4px;
    font-size:10px;
    color:#666;
    line-height:1.4;
}

.items-table .sku-cell{
    text-align:left;
    white-space:nowrap;
}

.items-table .qty-cell{
    text-align:center;
    white-space:nowrap;
}

.items-table .money-cell{
    text-align:right;
    white-space:nowrap;
}

/* TOTALS */

.totals-wrap{
    width:100%;
    margin-top:18px;
}

.totals-table{
    width:320px;
    margin-left:auto;
    border-collapse:collapse;
}

.totals-table td{
    border:1px solid #ddd;
    padding:7px 10px;
    font-size:11px;
}

.totals-label{
    text-align:left;
}

.totals-value{
    text-align:right;
    white-space:nowrap;
}

.totals-total td{
    font-weight:700;
    font-size:13px;
}

/* PAYMENT + TERMS */

.payment-table{
    width:100%;
    border-collapse:collapse;
    margin-top:28px;
}

.payment-table td{
    vertical-align:top;
    padding:0;
}

.payment-left{
    width:55%;
    padding-right:18px;
}

.payment-right{
    width:45%;
}

.banking-box{
    border:1px solid #ddd;
    padding:12px 14px;
}

.payment-title{
    font-weight:700;
    font-size:12px;
    margin-bottom:8px;
}

.payment-list{
    margin:6px 0 0 16px;
    padding:0;
    line-height:1.55;
}

.banking-box p{
    margin:0;
    line-height:1.55;
    font-size:11px;
}

/* FOOTER */

.footer{
    position:fixed;
    left:0;
    right:0;
    bottom:18px;
    text-align:center;
    font-size:10px;
    color:#777;
}

</style>


<!-- HEADER -->

<table class="header-table">
    <tr>
        <td class="company">

            <img src="file://<?= $_SERVER['DOCUMENT_ROOT'] ?>/core/assets/logo.png" style="height:50px;"><br><br>

            <strong>EDM Solutions (Pty) Ltd</strong><br>
            Smart Metering. Simplified<br>
            info@edmsolutions.co.za<br>
            www.edmsolutions.co.za

        </td>

        <td class="document-title">

            <h2><?= htmlspecialchars($document_title ?? 'DOCUMENT') ?></h2>

            <strong><?= htmlspecialchars($document_number ?? '') ?></strong><br>

            <?= htmlspecialchars($document_date ?? '') ?>

        </td>
    </tr>
</table>


<!-- CUSTOMER + DETAILS -->

<table class="info-table">
    <tr>
        <td class="billto-col">
            <div class="section-title">Bill To</div>
            <div class="billto-content">
                <?= htmlspecialchars($customer_name ?? '') ?><br>
                <?= htmlspecialchars($customer_email ?? '') ?><br>
                <?= htmlspecialchars($customer_phone ?? '') ?><br>
                <?= nl2br(htmlspecialchars($customer_address ?? '')) ?>
            </div>
        </td>

        <td class="details-col">
            <div class="section-title">Details</div>
            <div class="details-content">
                Document Number:<br>
                <strong><?= htmlspecialchars($document_number ?? '') ?></strong><br><br>

                Date:<br>
                <?= htmlspecialchars($document_date ?? '') ?><br><br>

                Status:<br>
                <?= htmlspecialchars($document_status ?? '') ?>
            </div>
        </td>
    </tr>
</table>


<!-- ITEMS -->

<table class="items-table">
    <colgroup>
        <col class="col-product">
        <col class="col-sku">
        <col class="col-qty">
        <col class="col-rate">
        <col class="col-total">
    </colgroup>

    <thead>
        <tr>
            <th>Product</th>
            <th>SKU</th>
            <th>Qty</th>
            <th>Unit Price</th>
            <th>Total</th>
        </tr>
    </thead>

    <tbody>

    <?php foreach($items as $item): ?>
        <tr>
            <td class="product-cell">
                <span class="product-name"><?= htmlspecialchars($item['label'] ?? '') ?></span>

                <?php if(!empty($item['comment'])): ?>
                    <span class="product-comment"><?= htmlspecialchars($item['comment']) ?></span>
                <?php endif; ?>
            </td>

            <td class="sku-cell">
                <?= htmlspecialchars($item['sku'] ?? '') ?>
            </td>

            <td class="qty-cell">
                <?= number_format((float)($item['units'] ?? 0),2) ?>
            </td>

            <td class="money-cell">
                R <?= number_format((float)($item['rate'] ?? 0),2) ?>
            </td>

            <td class="money-cell">
                R <?= number_format((float)($item['amount'] ?? 0),2) ?>
            </td>
        </tr>
    <?php endforeach; ?>

    </tbody>
</table>


<!-- TOTALS -->

<div class="totals-wrap">
    <table class="totals-table">
        <tr>
            <td class="totals-label">Subtotal</td>
            <td class="totals-value">R <?= number_format((float)($subtotal ?? 0),2) ?></td>
        </tr>

        <tr>
            <td class="totals-label">VAT</td>
            <td class="totals-value">R <?= number_format((float)($vat_total ?? 0),2) ?></td>
        </tr>

        <tr class="totals-total">
            <td class="totals-label">Total</td>
            <td class="totals-value">R <?= number_format((float)($total ?? 0),2) ?></td>
        </tr>
    </table>
</div>


<!-- PAYMENT + TERMS -->

<table class="payment-table">
    <tr>
        <td class="payment-left">
            <div class="payment-title">Payment Terms</div>
            <ul class="payment-list">
                <li>Payment due within 7 days.</li>
                <li>Installation scheduled after payment confirmation.</li>
                <li>All equipment remains property of EDM Solutions until fully paid.</li>
            </ul>
        </td>

        <td class="payment-right">
            <div class="banking-box">
                <div class="payment-title">Banking Details</div>

                <p>
                    Bank: FNB<br>
                    Account Name: EDM Solutions (Pty) Ltd<br>
                    Account Number: XXXXXXXX<br>
                    Branch Code: 250655<br><br>

                    <strong>Payment Reference</strong><br>
                    <?= htmlspecialchars($document_number ?? '') ?>
                </p>
            </div>
        </td>
    </tr>
</table>


<div class="footer">
    EDM Solutions (Pty) Ltd • Smart Metering. Simplified • www.edmsolutions.co.za
</div>