<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?= lang($title) ?></title>
    <style type="text/css">
        body {
            font-family: dejavusanscondensed, sans-serif;
            color: #1f2937;
            background: #ffffff;
            font-size: 10px;
            margin: 0;
            padding: 18px 20px;
        }

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

        td, th {
            vertical-align: top;
        }

        .sheet {
            border: 1px solid #e2e8f0;
            border-top: 4px solid #0f172a;
            border-radius: 12px;
            padding: 16px 18px 20px;
            background: #ffffff;
        }

        .brand {
            display: inline-block;
            vertical-align: top;
        }

        .logo-box {
            width: 42px;
            height: 42px;
            border-radius: 6px;
            background: #0f172a;
            color: #ffffff;
            text-align: center;
            line-height: 42px;
            font-weight: 700;
            font-size: 14px;
            margin-right: 10px;
        }

        .brand-title {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }

        .brand-subtitle {
            font-size: 8px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #94a3b8;
            margin: 4px 0 0;
        }

        .brand-meta {
            margin-top: 8px;
            font-size: 9px;
            color: #64748b;
            line-height: 1.6;
        }

        .invoice-title {
            text-align: right;
        }

        .invoice-label {
            font-size: 18px;
            letter-spacing: 0.2em;
            color: #cbd5e1;
            font-weight: 400;
            margin-bottom: 6px;
        }

        .meta-table td {
            font-size: 9px;
            padding: 3px 0;
            color: #475569;
        }

        .meta-table td.value {
            text-align: right;
            font-weight: 700;
            color: #0f172a;
        }

        .meta-table td.value.due {
            color: #dc2626;
        }

        .section-head {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: #94a3b8;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 6px;
            margin-bottom: 8px;
        }

        .billed-name {
            font-size: 11px;
            font-weight: 700;
            color: #0f172a;
        }

        .billed-meta {
            font-size: 9px;
            color: #64748b;
            line-height: 1.6;
        }

        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #e2e8f0;
            margin-top: 18px;
        }

        .invoice-table th,
        .invoice-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #edf2f7;
        }

        .invoice-table th {
            background: #f8fafc;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 8px;
            color: #64748b;
            text-align: left;
        }

        .invoice-table td.right,
        .invoice-table th.right {
            text-align: right;
        }

        .item-title {
            font-size: 10px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 4px;
        }

        .item-desc {
            font-size: 9px;
            color: #64748b;
            line-height: 1.5;
        }

        .terms {
            font-size: 9px;
            color: #475569;
            line-height: 1.6;
        }

        .totals {
            font-size: 10px;
            color: #0f172a;
        }

        .totals .row {
            display: table;
            width: 100%;
            margin-bottom: 6px;
        }

        .totals .label {
            display: table-cell;
            color: #64748b;
        }

        .totals .value {
            display: table-cell;
            text-align: right;
            font-weight: 700;
        }

        .totals .negative {
            color: #dc2626;
        }

        .totals .divider {
            border-top: 1px solid #e2e8f0;
            margin: 8px 0;
        }

        .amount-due {
            margin-top: 8px;
            padding: 8px 10px;
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #0f172a;
        }

        .amount-due .value {
            float: right;
            font-size: 12px;
            letter-spacing: 0;
        }
    </style>
</head>
<body>
<?php
$uri = $this->uri->segment(3);
if ($uri == 'invoice_email') {
    $img = base_url() . config_item('invoice_logo');
} else {
    $rootPath = defined('ROOTPATH') ? ROOTPATH : FCPATH;
    $local_logo = rtrim($rootPath, '/\\') . '/' . ltrim((string) config_item('invoice_logo'), '/\\');
    $img = !empty($local_logo) && is_file($local_logo) ? $local_logo : rtrim($rootPath, '/\\') . '/uploads/default_logo.png';
}
$currency = get_sales_currency($sales_info);
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : '';
?>

<div class="sheet">
    <table>
        <tr>
            <td style="width:60%; vertical-align:top;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <img src="<?= $img ?>" alt="" style="width:42px; height:42px; border-radius:8px; object-fit:contain;">
                    <div class="brand">
                        <p class="brand-title"><?= config_item('company_legal_name') ?: config_item('company_name') ?></p>
                    </div>
                </div>
                <div class="brand-meta">
                    <?= config_item('company_name') ?><br>
                    <?= config_item('company_address') ?><br>
                    <?= config_item('company_city') ?> <?= config_item('company_zip_code') ?>, <?= config_item('company_country') ?><br>
                    P: <?= config_item('company_phone') ?><br>
                    E: <?= config_item('company_email') ?>
                </div>
            </td>
            <td style="width:40%; vertical-align:top;">
                <div class="invoice-title">
                    <div class="invoice-label"><?= strtoupper(lang('invoice')) ?></div>
                    <table class="meta-table">
                        <tr>
                            <td>invoice_number</td>
                            <td class="value"><?= html_escape($sales_info->reference_no) ?></td>
                        </tr>
                        <tr>
                            <td>date_of_issue</td>
                            <td class="value"><?= display_date($sales_info->invoice_date) ?></td>
                        </tr>
                        <tr>
                            <td>date_due</td>
                            <td class="value due"><?= display_date($sales_info->due_date) ?></td>
                        </tr>
                        <tr>
                            <td>amount_due</td>
                            <td class="value"><?= display_money($invoice_due, $currency_symbol) ?></td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>

    <table style="margin-top:20px;">
        <tr>
            <td style="width:70%; vertical-align:top;">
                <div class="section-head">BILLED_TO</div>
                <div class="billed-name"><?= !empty($sales_info->name) ? html_escape($sales_info->name) : '-' ?></div>
                <div class="billed-meta"><?= !empty($sales_info->company_name) ? html_escape($sales_info->company_name) : '' ?></div>
                <div class="billed-meta" style="font-style:italic;">no_additional_address_details_provided</div>
            </td>
            <td style="width:30%; vertical-align:top; text-align:right;">
                <?php if (!empty($qrcode)) { ?>
                    <div class="section-head" style="text-align:right;">PAYMENT_SCAN</div>
                    <div style="margin-top:8px; display:inline-block; border:1px solid #e2e8f0; padding:8px; border-radius:8px;">
                        <?= $qrcode ?>
                    </div>
                <?php } ?>
            </td>
        </tr>
    </table>

    <table class="invoice-table">
        <thead>
        <tr>
            <th style="width:6%;">#</th>
            <th><?= lang('description') ?></th>
            <th class="right"><?= lang('qty') ?></th>
            <th class="right"><?= lang('price') ?></th>
            <th class="right"><?= lang('total') ?></th>
        </tr>
        </thead>
        <tbody>
        <?php if (!empty($all_items)) : ?>
            <?php foreach ($all_items as $key => $v_item) : ?>
                <?php $item_name = $v_item->item_name ? $v_item->item_name : $v_item->item_desc; ?>
                <tr>
                    <td><?= $key + 1 ?></td>
                    <td>
                        <div class="item-title"><?= html_escape($item_name) ?></div>
                        <div class="item-desc"><?= nl2br(html_escape($v_item->item_desc)) ?></div>
                    </td>
                    <td class="right"><?= html_escape($v_item->quantity) ?></td>
                    <td class="right"><?= display_money($v_item->unit_cost, $currency_symbol) ?></td>
                    <td class="right"><?= display_money($v_item->total_cost, $currency_symbol) ?></td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
        </tbody>
    </table>

    <table style="margin-top:18px;">
        <tr>
            <td style="width:60%; vertical-align:top;">
                <div class="section-head">TERMS_CONDITIONS</div>
                <div class="terms"><?= $sales_info->notes ?></div>
                <?php if (!empty($footer)) { ?>
                    <div class="terms" style="margin-top:10px; font-style:italic;"><?= $footer ?></div>
                <?php } ?>
            </td>
            <td style="width:40%; vertical-align:top;">
                <div class="totals">
                    <div class="row"><span class="label">Sub Total</span><span class="value"><?= display_money($sales_info->sub_total, $currency_symbol) ?></span></div>
                    <?php if ($sales_info->discount_total > 0): ?>
                        <div class="row"><span class="label">Discount (<?= $sales_info->discount_percent ?>%)</span><span class="value negative">-<?= display_money($sales_info->discount, $currency_symbol) ?></span></div>
                    <?php endif; ?>
                    <?php
                    $tax_info = !empty($sales_info->total_tax) ? json_decode($sales_info->total_tax) : null;
                    if (!empty($tax_info) && !empty($tax_info->tax_name)) {
                        foreach ($tax_info->tax_name as $t_key => $v_tax_info) {
                            $tax = explode('|', $v_tax_info);
                            ?>
                            <div class="row"><span class="label"><?= html_escape($tax[0] . ' (' . $tax[1] . ' %)') ?></span><span class="value"><?= display_money($tax_info->total_tax[$t_key], $currency_symbol) ?></span></div>
                        <?php }
                    } ?>
                    <?php if ($sales_info->adjustment > 0): ?>
                        <div class="row"><span class="label">Adjustments</span><span class="value"><?= display_money($sales_info->adjustment, $currency_symbol) ?></span></div>
                    <?php endif; ?>
                    <div class="divider"></div>
                    <div class="row"><span class="label" style="font-weight:700;">Total</span><span class="value" style="font-size:12px;"><?= display_money($sales_info->total, $currency_symbol) ?></span></div>
                    <?php if (!empty($paid_amount)) { ?>
                        <div class="row"><span class="label">Amount Paid</span><span class="value"><?= display_money($paid_amount, $currency_symbol) ?></span></div>
                    <?php } ?>
                    <div class="amount-due">
                        AMOUNT_DUE
                        <span class="value"><?= display_money($invoice_due, $currency_symbol) ?></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
