<style>

body{
font-family: DejaVu Sans, sans-serif;
font-size:11px;
color:#333;
margin-bottom:80px;
}

/* HEADER */

.header{
border-bottom:2px solid #f2531e;
padding-bottom:10px;
margin-bottom:25px;
width:100%;
}

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

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

.logo{
height:60px;
}

.company{
text-align:right;
font-size:11px;
}

.company strong{
font-size:13px;
}

/* DOCUMENT TITLE */

h2{
font-weight:600;
letter-spacing:0.5px;
}

/* CUSTOMER + DETAILS */

.info-table{
width:100%;
border-collapse:collapse;
margin-bottom:25px;
}

.info-table td{
width:50%;
border:1px solid #ddd;
padding:12px;
vertical-align:top;
}

/* ITEMS */

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

.items th{
background:#f2531e;
color:white;
padding:8px;
text-align:left;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.5px;
}

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

.item-comment{
font-size:10px;
color:#666;
padding:6px 10px;
}

/* TOTALS */

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

.totals td{
padding:6px;
font-size:12px;
}

.total-final{
font-weight:bold;
font-size:13px;
border-top:2px solid #000;
}

/* SECTIONS */

.section{
margin-top:30px;
}

/* FOOTER */

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
font-size:10px;
text-align:center;
color:#777;
border-top:1px solid #ddd;
padding-top:8px;
}

</style>


<!-- HEADER -->

<div class="header">

<table class="header-table">

<tr>

<td>

<img src="<?= $logo ?>" class="logo">

</td>

<td class="company">

<strong>EDM Solutions (Pty) Ltd</strong><br>
22 Magwa Crescent<br>
Waterfall City<br>
Midrand, Johannesburg<br>
2066<br><br>

Tel: 010 009 5448<br>
info@edmsolutions.co.za<br>
www.edmsolutions.co.za

</td>

</tr>

</table>

</div>


<!-- DOCUMENT TITLE -->

<div style="margin-bottom:20px;">

<h2 style="margin:0;font-size:22px;">
<?= $document_title ?> <?= htmlspecialchars($document_number) ?>
</h2>

<div style="color:#777;font-size:11px;margin-top:4px;">
Generated by EDM Core System
</div>

</div>


<!-- CUSTOMER + DETAILS -->

<table class="info-table">

<tr>

<td>

<strong><?= $customer_label ?></strong><br><br>

<?= htmlspecialchars($customer_name ?? '') ?><br>
<?= htmlspecialchars($customer_email ?? '') ?><br>
<?= htmlspecialchars($customer_phone ?? '') ?><br>

<?= htmlspecialchars($customer_address ?? '') ?><br>

<?= htmlspecialchars($customer_city ?? '') ?>
<?= !empty($customer_province) ? ', '.htmlspecialchars($customer_province) : '' ?>

</td>


<td>

<strong><?= $details_label ?></strong><br><br>

<?= $details_content ?>

</td>

</tr>

</table>


<!-- ITEMS -->

<table class="items">

<tr>
<th width="40%">Product</th>
<th width="15%">SKU</th>
<th width="10%">Qty</th>
<th width="15%">Price</th>
<th width="20%">Total</th>
</tr>

<?php foreach($items as $item): ?>

<tr>

<td>

<strong><?= htmlspecialchars($item['product_name']) ?></strong>

<?php if(!empty($item['description'])): ?>

<br><small><?= htmlspecialchars($item['description']) ?></small>

<?php endif; ?>

</td>

<td><?= htmlspecialchars($item['sku']) ?></td>

<td><?= (int)$item['quantity'] ?></td>

<td>R <?= number_format($item['unit_price'],2) ?></td>

<td>R <?= number_format($item['total'],2) ?></td>

</tr>


<?php if(!empty($item['item_comment'])): ?>

<tr>

<td colspan="5" class="item-comment">

<strong>Comment:</strong>

<?= htmlspecialchars($item['item_comment']) ?>

</td>

</tr>

<?php endif; ?>

<?php endforeach; ?>

</table>


<!-- TOTALS -->

<table class="totals">

<tr>
<td style="color:#666;">Subtotal</td>
<td align="right">R <?= number_format($subtotal,2) ?></td>
</tr>

<?php if(!empty($vat_display)): ?>

<tr>
<td style="color:#666;">VAT</td>
<td align="right"><?= $vat_display ?></td>
</tr>

<?php endif; ?>

<tr class="total-final">
<td style="padding-top:8px;">TOTAL</td>
<td align="right" style="padding-top:8px;">
R <?= number_format($total,2) ?>
</td>
</tr>

</table>


<div style="clear:both"></div>


<!-- TERMS + BANK -->

<table style="width:100%; margin-top:40px; border-collapse:collapse;">

<tr>

<td style="width:50%; vertical-align:top; padding-right:25px;">

<strong style="display:block; margin-bottom:10px;">Terms</strong>

<?= $terms_text ?>

</td>


<td style="width:50%; vertical-align:top; padding-left:25px;">

<strong style="display:block; margin-bottom:10px;">Banking Details</strong>

Bank: FNB<br>
Account Name: EDM Solutions (Pty) Ltd<br>
Account Number: 62693931216<br>
Account Type: Business Cheque Account<br>
Branch Code: 250655<br><br>

<strong>Payment Reference:</strong><br>
<?= htmlspecialchars($document_number) ?>

</td>

</tr>

</table>


<!-- FOOTER -->

<div class="footer">

EDM Solutions (Pty) Ltd
Smart Metering. Simplified.<br>
www.edmsolutions.co.za | 010 009 5448

</div>