<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?= lang($title) ?></title>
    <?php
    $direction = $this->session->userdata('direction');
    if (!empty($direction) && $direction == 'rtl') {
        $RTL = 'on';
    } else {
        $RTL = config_item('RTL');
    }
    ?>
    <style type="text/css">
        /*@page {*/
        /*    margin: 1in 0in 0in 0in;*/
        /*}*/
        @font-face {
            font-family: "Source Sans Pro", sans-serif;
        }

        .h4 {
            font-size: 14px;
        }

        .h3 {
            font-size: 15px;
        }

        h2 {
            font-size: 19px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        a {
            color: #334155;
            text-decoration: none;
        }

        body {
            color: #334155;
            background: #ffffff;
            font-size: 12px;
            font-family: DejaVu Sans, "Source Sans Pro", sans-serif;
            width: 100%;
            line-height: 1.5;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        .page-shell {
            width: 100%;
            padding: 18px 22px 24px;
        }

        .brand-shell {
            border: 1px solid #d7deea;
            padding: 18px 20px;
            background: #f8fafc;
            margin-bottom: 18px;
        }

        .brand-logo {
            width: 60px;
            height: 60px;
            background: #ffffff;
            border: 1px solid #d7deea;
            padding: 6px;
        }

        .brand-title {
            font-size: 24px;
            font-weight: 500;
            color: #0f172a;
            margin: 0 0 4px;
        }

        .brand-text {
            font-size: 12px;
            color: #64748b;
            margin: 0;
        }

        .report-meta {
            width: 280px;
        <?php if (!empty($RTL)) { ?> text-align: left;
        <?php } else { ?> text-align: right;
        <?php } ?>
        }

        .header-title {
            font-size: 20px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 4px;
            line-height: 1.15;
        }

        .header-subtitle {
            font-size: 10px;
            color: #64748b;
            margin: 0;
            line-height: 1.35;
        }

        .range-chip {
            display: inline-block;
            padding: 4px 0 0;
            background: transparent;
            color: #475569;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        #details {
            margin-bottom: 10px;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        #client {
            padding-left: 6px;
            /*border-left: 6px solid #0087C3;*/
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        #client .to {
            color: #777777;
        }

        h2.name {
            font-size: 1em;
            font-weight: normal;
            margin: 0;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        #invoice {
        <?php if(!empty($RTL)){?> text-align: left;
        <?php }else{?> text-align: right;
        <?php }?>
        }

        #invoice h1 {
            color: #0f172a;
            font-size: 1.5em;
            line-height: 1em;
            font-weight: 700;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        #invoice .date {
            font-size: 1em;
            color: #64748b;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        table {
            width: 100%;
            border-spacing: 0;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        .table-shell {
            border: 1px solid #d7deea;
            overflow: hidden;
            background: #ffffff;
            margin-bottom: 18px;
        }

        table.items {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            margin-bottom: 0;
            border: 0;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        table.items th,
        table.items td {
            padding: 10px 12px;
            border-bottom: 1px solid #e2e8f0;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }else{?> text-align: left;
        <?php }?>

        }

        table.items th {
            white-space: nowrap;
            font-weight: 700;
            background: #1e293b;
            color: #f8fafc;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 11px;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        table.items td {
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }else{?> text-align: left;
        <?php }?>
        }

        table.items td h3 {
            color: #0f172a;
            font-size: 13px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 3px;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        table.items .no {
            background: #dddddd;
        }

        table.items .desc {
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }else{?> text-align: left;
        <?php }?>
        }

        table.items .unit {
            background: #ffffff;
            padding: 8px 10px 8px 8px;
            word-wrap: break-word;
        }

        table.items .qty {
        }

        table.items td.unit,
        table.items td.qty,
        table.items td.total {
            font-size: 1em;
        }

        table.items tbody tr:last-child td {
            border: none;

        }

        table.items tfoot td {
            padding: 10px 12px;
            background: #f8fafc;
            border-bottom: none;
            font-size: 13px;
            white-space: nowrap;
            border-top: 1px solid #dbe3ee;
        <?php if(!empty($RTL)){?> text-align: right;
        <?php }?>
        }

        table.items tfoot tr:first-child td {
            border-top: none;
        }

        table.items tfoot tr:last-child td {
            color: #0f172a;
            font-size: 1.15em;
            font-weight: 700;
            border-top: 1px solid #c7d2fe;
            background: #eef2ff;
            color: #1e1b4b;

        }

        table.items tfoot tr td:first-child {
            border: none;
        <?php if(!empty($RTL)){?> text-align: left;
        <?php }else{?> text-align: right;
        <?php }?>
        }

        #thanks {
            font-size: 15px;
            margin-bottom: 8px;
            color: #0f172a;
            font-weight: 700;
        }

        #notices {
            padding: 14px 16px;
            border-left: 4px solid #0f172a;
            border-radius: 12px;
            background: #f8fafc;
        }

        #notices .notice {
            font-size: 1em;
            color: #475569;
        }

        footer {
            color: #64748b;
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 0;
            border-top: 1px solid #dbe3ee;
            padding: 8px 0;
            text-align: center;
        }

        tr.total td, tr th.total, tr td.total {
        <?php if(!empty($RTL)){?> text-align: left;
        <?php }else{?> text-align: right;
        <?php }?>
        }

        .bg-items {
            background: #0f172a !important;
            color: #ffffff
        }

        .p-md {
            padding: 9px !important;
        }

        .left {
        <?php if(!empty($RTL)){?> float: right;
        <?php }else{?> float: left;
        <?php }?>
        }

        .right {
        <?php if(!empty($RTL)){?> float: left;
            padding-right: 10px;
        <?php }else{?> float: right;
            padding-left: 10px;
        <?php }?>
        }

        .num_word {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .status-chip {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 999px;
            background: #0f172a;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .details-card {
            border-radius: 14px;
            background: #ffffff;
            overflow: hidden;
        }

        .section-title {
            margin: 0;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .details-body {
            padding: 16px 18px;
        }

        .party-name {
            margin: 0 0 6px;
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }

        .amount-words {
            margin: 12px 0 0;
            padding: 14px 16px;
            border-radius: 12px;
            background: #f8fafc;
            color: #334155;
        }

        .summary-panel {
            margin-top: 18px;
            border: 1px solid #d7deea;
            overflow: hidden;
            background: #ffffff;
        }

        .summary-heading {
            padding: 12px 14px;
            border-bottom: 1px solid #1e293b;
            background: #1e293b;
            font-size: 11px;
            font-weight: 700;
            color: #f8fafc;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .payment-title {
            margin: 0 0 12px;
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }

        .payment_header td {
            background: #f1f5f9;
            color: #0f172a;
            font-weight: 700;
            border-bottom: 1px solid #dbe3ee;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 11px;
        }

        .cbb td {
            border-bottom: 1px solid #e2e8f0;
        }

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

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

        .sheet-label {
            font-size: 22px;
            letter-spacing: 0.18em;
            color: #cbd5e1;
            font-weight: 400;
            margin-bottom: 6px;
        }

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

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

        .brand-subtitle {
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #94a3b8;
            margin-top: 2px;
        }

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

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

        .amount-due .value {
            float: right;
            font-size: 14px;
            letter-spacing: 0;
        }

        .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: 10px;
            color: #64748b;
            text-align: left;
        }

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

        .totals-box {
            margin-top: 18px;
            border-top: 1px solid #e2e8f0;
            padding-top: 12px;
        }

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

        .totals-box .row .label {
            display: table-cell;
            font-size: 11px;
            color: #64748b;
        }

        .totals-box .row .value {
            display: table-cell;
            text-align: right;
            font-size: 11px;
            font-weight: 700;
            color: #0f172a;
        }

        .totals-box .total-row {
            border-top: 1px solid #c7d2fe;
            padding-top: 8px;
            margin-top: 8px;
        }

        .totals-box .total-row .label,
        .totals-box .total-row .value {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
        }

    </style>
</head>
<body>

<?php
$uri = $this->uri->segment(3);
$rootPath = defined('ROOTPATH') ? ROOTPATH : FCPATH;
if ($uri == 'invoice_email') {
    $img = base_url() . config_item('invoice_logo');
} else {
    $img = $rootPath . '/' . config_item('invoice_logo');
    if (!file_exists($img)) {
        $img = base_url() . config_item('invoice_logo');
    }
    if (!file_exists($img)) {
        $img = $rootPath . '/' . 'uploads/default_logo.png';
    }
}
$client_lang = 'english';
$invoice_id = !empty($sales_info->invoices_id) ? $sales_info->invoices_id : null;
$invoice_url = !empty($invoice_id) ? base_url('frontend/view_invoice/') . url_encode($invoice_id) : null;
$currency = get_sales_currency($sales_info);
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : '';
$document_number_label = !empty($invoice_id) ? lang('invoice_number') : lang('reference_no');
$issue_date = !empty($sales_info->invoice_date) ? $sales_info->invoice_date : (!empty($sales_info->date) ? $sales_info->date : null);
$due_date = !empty($sales_info->due_date) ? $sales_info->due_date : null;
$amount_due_label = isset($invoice_due) ? lang('amount_due') : lang('total');
$amount_due_value = isset($invoice_due) ? $invoice_due : (!empty($sales_info->total) ? $sales_info->total : 0);
?>
<div class="page-shell">
    <div class="invoice-sheet">
        <table style="width:100%; border:0;">
            <tr>
                <td style="width:60%; vertical-align:top;">
                    <div style="display:flex; align-items:center; gap:12px;">
                        <img class="brand-logo" src="<?= $img ?>" alt="<?= config_item('company_name') ?>">
                        <div>
                            <div class="brand-title"><?= config_item('company_name') ?></div>
                        </div>
                    </div>
                    <div class="brand-text" style="margin-top:10px;"><?= $this->config->item('company_legal_name') ?></div>
                    <div class="brand-text"><?= $this->config->item('company_address') ?></div>
                    <div class="brand-text"><?= $this->config->item('company_city') ?> <?= $this->config->item('company_zip_code') ?></div>
                    <div class="brand-text"><?= $this->config->item('company_country') ?></div>
                    <div class="brand-text">P: <?= config_item('company_phone') ?></div>
                    <div class="brand-text">E: <?= config_item('company_email') ?></div>
                </td>
                <td style="width:40%; vertical-align:top;">
                    <div class="sheet-title">
                            <div class="sheet-label"><?= strtoupper(lang($title)) ?></div>
                        <table class="sheet-meta" style="width:100%;">
                            <tr>
                                <td><?= $document_number_label ?></td>
                                <td class="value"><?= html_escape($sales_info->reference_no) ?></td>
                            </tr>
                            <tr>
                                <td><?= lang('date_of_issue') ?></td>
                                <td class="value"><?= !empty($issue_date) ? display_date($issue_date) : '-' ?></td>
                            </tr>
                            <tr>
                                <td><?= lang('date_due') ?></td>
                                <td class="value" style="color:#dc2626;"><?= !empty($due_date) ? display_date($due_date) : '-' ?></td>
                            </tr>
                            <tr>
                                <td><?= $amount_due_label ?></td>
                                <td class="value" style="font-size:14px;"><?= display_money($amount_due_value, $currency_symbol) ?></td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

        <table style="width:100%; margin-top:18px;">
            <tr>
                <td style="width:70%; vertical-align:top;">
                    <div class="section-head"><?= lang('billed_to') ?></div>
                    <div class="party-name"><?= (!empty($sales_info->name) ? $sales_info->name : '') ?></div>
                    <div class="brand-text"><?= (!empty($sales_info->company_name) ? $sales_info->company_name : '') ?></div>
                    <div class="brand-text" style="font-style:italic;"><?= lang('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;"><?= lang('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>
<?php if (empty($sales_info->item_layout)) { ?>
        <table class="invoice-table">
            <thead>
            <tr>
                <th>#</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 style="font-weight:700; color:#0f172a;"><?= $item_name ?></div>
                        <div style="font-size:11px; color:#64748b;"><?= nl2br($v_item->item_desc) ?></div>
                    </td>
                    <td class="right"><?= $v_item->quantity ?></td>
                    <td class="right"><?= display_money($v_item->unit_cost) ?></td>
                    <td class="right"><?= display_money($v_item->total_cost) ?></td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
        </tbody>
    </table>

    <div style="margin-top:18px;">
        <table style="width:100%;">
            <tr>
                <td style="width:60%; vertical-align:top;">
                    <div class="section-head"><?= lang('terms_conditions') ?></div>
                    <div style="margin-top:8px; font-size:11px; color:#64748b;">
                        <?= ($sales_info->notes) ?>
                    </div>
                </td>
                <td style="width:40%; vertical-align:top;">
                    <div class="totals-box">
                        <div class="row"><span class="label"><?= lang('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"><?= lang('discount') ?>(<?= $sales_info->discount_percent; ?>%)</span><span class="value" style="color:#dc2626;">-<?= display_money($sales_info->discount, $currency_symbol) ?></span></div>
                        <?php endif; ?>
                        <?php
                        $tax_info = json_decode($sales_info->total_tax);
                        if (!empty($tax_info) && !empty($tax_info->tax_name)) {
                            $total_tax = $tax_info->total_tax;
                            foreach ($tax_info->tax_name as $t_key => $v_tax_info) {
                                $tax = explode('|', $v_tax_info);
                                $tax_value = !empty($total_tax[$t_key]) ? $total_tax[$t_key] : 0;
                                ?>
                                <div class="row"><span class="label"><?= $tax[0] . ' (' . $tax[1] . ' %)' ?></span><span class="value"><?= display_money($tax_value, $currency_symbol); ?></span></div>
                            <?php }
                        } ?>
                        <?php if ($sales_info->adjustment > 0): ?>
                            <div class="row"><span class="label"><?= lang('adjustment') ?></span><span class="value"><?= display_money($sales_info->adjustment, $currency_symbol) ?></span></div>
                        <?php endif; ?>
                        <div class="totals-box total-row row">
                            <span class="label"><?= lang('total') ?></span>
                            <span class="value"><?= display_money($sales_info->total, $currency_symbol) ?></span>
                        </div>
                        <?php if (!empty($paid_amount) && $paid_amount > 0) { ?>
                            <div class="row"><span class="label"><?= lang('paid_amount') ?></span><span class="value"><?= display_money($paid_amount, $currency_symbol); ?></span></div>
                        <?php } ?>
                        <?php if (!empty($invoice_due)) { ?>
                            <div class="row"><span class="label"><?= lang('amount_due') ?></span><span class="value"><?= display_money($invoice_due, $currency_symbol); ?></span></div>
                        <?php } ?>
                        <?php if (!empty($invoice_due)) { ?>
                            <div class="amount-due">
                                <?= lang('amount_due') ?>
                                <span class="value"><?= display_money($invoice_due, $currency_symbol); ?></span>
                            </div>
                        <?php } ?>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <?php if (empty($delivery)) { ?>
        <?php if (!empty($invoice_due) && $invoice_due > 0 && config_item('amount_to_words') == 'Yes') { ?>
            <div class="clearfix">
                <p class="right h4 num_word amount-words"><strong class="h3"><?= lang('num_word') ?>
                        : </strong> <?= number_to_word($currency->code, $invoice_due); ?></p>
            </div>
        <?php } ?>
    <?php } ?>
    </div>
    <?php if (empty($delivery)) { ?>
        <?php
        if (!empty($all_payment_info)) { ?>
            <div style="margin-top:20px">
                <h4 class="payment-title"><?= lang('payment') . ' ' . lang('details') ?></h4>
                <div class="table-shell">
                <table style="width:100%;margin-bottom:0;table-layout:fixed;" cellpadding="0"
                       cellspacing="0" border="0">
                    <thead>
                    <tr class="payment_header">
                        <td style="padding:5px 10px 5px 10px;word-wrap: break-word;">
                            <?= lang('transaction_id') ?>
                        </td>
                        <td style="padding:5px 10px 5px 5px;word-wrap: break-word;"
                            align="right">
                            <?= lang('payment_date') ?>
                        </td>
                        <td style="padding:5px 10px 5px 5px;word-wrap: break-word;"
                            align="right">
                            <?= lang('amount') ?>
                        </td>
                        <td style="padding:5px 10px 5px 5px;word-wrap: break-word;"
                            align="right">
                            <?= lang('payment_mode') ?>
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                    foreach ($all_payment_info as $v_payments_info) {
                        if (is_numeric($v_payments_info->payment_method)) {
                            $v_payments_info->method_name = get_any_field('tbl_payment_methods', array('payment_methods_id' => $v_payments_info->payment_method), 'method_name');
                        } else {
                            $v_payments_info->method_name = $v_payments_info->payment_method;
                        }
                        ?>
                        <tr class="cbb">
                            <td style="padding: 10px 0px 10px 10px;"
                                valign="top"><?= $v_payments_info->trans_id; ?>
                            </td>
                            <td style="padding: 10px 10px 5px 10px;text-align:right;word-wrap: break-word;"
                                valign="top"><?= display_date($v_payments_info->payment_date); ?>
                            </td>
                            <td style="padding: 10px 10px 5px 10px;text-align:right;word-wrap: break-word;"
                                valign="top"><?= display_money($v_payments_info->amount, $currency->symbol) ?>
                            </td>
                            <td style="text-align:right;padding: 10px 10px 10px 5px;word-wrap: break-word;"
                                valign="top">
                                <?= !empty($v_payments_info->method_name) ? $v_payments_info->method_name : '-'; ?>
                            </td>
                        </tr>
                    <?php } ?>
                    </tbody>
                </table>
                </div>
            </div>
        <?php } ?>
    <?php } ?>

    <?php
}
?>
<footer>
    <?= (!empty($footer) ? $footer : '') ?>
</footer>
</div>
</body>
</html>
