<?php
$client_lang = 'english';
$company_name = config_item('company_legal_name_' . $client_lang) ?: config_item('company_legal_name');
$company_name = $company_name ?: config_item('company_name');
$logo = is_file(config_item('invoice_logo')) ? base_url() . config_item('invoice_logo') : base_url() . 'uploads/default_logo.png';
$currency = get_sales_currency($sales_info);
$invoice_title = !empty($title) ? $title : lang('invoice');
$invoice_number = !empty($sales_info->reference_no) ? $sales_info->reference_no : '';
$invoice_date = !empty($sales_info->invoice_date) ? display_date($sales_info->invoice_date) : '';
$due_date = !empty($sales_info->due_date) ? display_date($sales_info->due_date) : '';
$subtotal = !empty($sales_info->sub_total) ? $sales_info->sub_total : 0;
$discount = !empty($sales_info->discount) ? $sales_info->discount : 0;
$adjustment = !empty($sales_info->adjustment) ? $sales_info->adjustment : 0;
$total = !empty($sales_info->total) ? $sales_info->total : 0;
$paid = !empty($paid_amount) ? $paid_amount : 0;
$due = !empty($invoice_due) ? $invoice_due : max(0, $total - $paid);
$progress = $total > 0 ? min(100, round(($paid / $total) * 100)) : 0;
$invoice_view = config_item('invoice_view');
$show_hsn = !empty($invoice_view) && $invoice_view == '2';
$qty_heading = lang('qty');
if ((isset($sales_info->show_quantity_as) && $sales_info->show_quantity_as == 'hours') || isset($hours_quantity)) {
    $qty_heading = lang('hours');
} elseif (isset($sales_info->show_quantity_as) && $sales_info->show_quantity_as == 'qty_hours') {
    $qty_heading = lang('qty') . '/' . lang('hours');
}
$tax_rows = array();
$tax_total = 0;
$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 => $tax_name) {
        $tax = explode('|', $tax_name);
        $amount = !empty($tax_info->total_tax[$t_key]) ? $tax_info->total_tax[$t_key] : 0;
        $tax_total += $amount;
        $tax_rows[] = array(
            'name' => !empty($tax[0]) ? $tax[0] : lang('tax'),
            'rate' => !empty($tax[1]) ? $tax[1] : 0,
            'amount' => $amount,
        );
    }
}
?>
<?php if (!empty($sales_info->overdue_days)) { ?>
    <div class="alert bg-danger-light hidden-print">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <i data-lucide="triangle-alert"></i>
        <?= $sales_info->overdue_days ?>
    </div>
<?php } ?>

<div class="modern-invoice-shell" id="sales_details" data-modern-invoice>
    <style>
        .modern-invoice-shell {
            --mi-ink: #101828;
            --mi-muted: #667085;
            --mi-line: #e4e7ec;
            --mi-soft: #f6f8fb;
            --mi-card: #ffffff;
            --mi-accent: #2563eb;
            --mi-accent-2: #0f766e;
            --mi-danger: #b42318;
            color: var(--mi-ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .modern-invoice-shell[data-tone="dark"] {
            --mi-ink: #f8fafc;
            --mi-muted: #cbd5e1;
            --mi-line: #334155;
            --mi-soft: #111827;
            --mi-card: #0f172a;
            --mi-accent: #60a5fa;
            --mi-accent-2: #2dd4bf;
            --mi-danger: #fca5a5;
        }
        .modern-invoice {
            max-width: 1120px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid var(--mi-line);
            border-radius: 26px;
            background: var(--mi-card);
            box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
        }
        .modern-invoice-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            max-width: 1120px;
            margin: 0 auto 14px;
        }
        .modern-invoice-actions {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .modern-invoice-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 36px;
            border: 1px solid var(--mi-line);
            border-radius: 999px;
            background: var(--mi-card);
            color: var(--mi-ink);
            padding: 0 14px;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
        }
        .modern-invoice-btn:hover {
            border-color: var(--mi-accent);
            color: var(--mi-accent);
        }
        .modern-invoice-hero {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
            gap: 28px;
            padding: 34px;
            color: #fff;
            background:
                radial-gradient(circle at 92% 8%, rgba(45, 212, 191, .45), transparent 28%),
                linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #0f766e 100%);
        }
        .modern-invoice-hero:after {
            content: "";
            position: absolute;
            inset: auto 34px 0;
            height: 1px;
            background: rgba(255, 255, 255, .2);
        }
        .modern-invoice-brand {
            display: flex;
            align-items: center;
            gap: 16px;
            min-width: 0;
        }
        .modern-invoice-logo {
            width: 92px;
            height: 64px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .94);
            object-fit: contain;
            padding: 10px;
        }
        .modern-invoice-kicker {
            margin: 0 0 4px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .72);
        }
        .modern-invoice-title {
            margin: 0;
            font-size: 38px;
            line-height: 1.05;
            font-weight: 850;
            letter-spacing: 0;
        }
        .modern-invoice-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .modern-invoice-meta-card {
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 18px;
            background: rgba(255, 255, 255, .11);
            padding: 14px;
            backdrop-filter: blur(10px);
        }
        .modern-invoice-meta-card span,
        .modern-invoice-address-label,
        .modern-invoice-summary-label {
            display: block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--mi-muted);
        }
        .modern-invoice-meta-card span {
            color: rgba(255, 255, 255, .72);
        }
        .modern-invoice-meta-card strong {
            display: block;
            margin-top: 6px;
            font-size: 16px;
            color: #fff;
        }
        .modern-invoice-body {
            padding: 30px 34px 34px;
            background: linear-gradient(180deg, var(--mi-card), var(--mi-soft));
        }
        .modern-invoice-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
            gap: 22px;
            margin-bottom: 24px;
        }
        .modern-invoice-panel {
            border: 1px solid var(--mi-line);
            border-radius: 22px;
            background: var(--mi-card);
            padding: 20px;
        }
        .modern-invoice-address {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }
        .modern-invoice-address h4 {
            margin: 8px 0 8px;
            font-size: 17px;
            font-weight: 800;
        }
        .modern-invoice-address p,
        .modern-invoice-note,
        .modern-invoice-words {
            margin: 0;
            color: var(--mi-muted);
            line-height: 1.65;
        }
        .modern-invoice-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
        }
        .modern-invoice-status .label {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 6px 10px;
        }
        .modern-invoice-progress {
            overflow: hidden;
            height: 10px;
            border-radius: 999px;
            background: var(--mi-line);
        }
        .modern-invoice-progress span {
            display: block;
            height: 100%;
            width: <?= (int) $progress ?>%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--mi-accent), var(--mi-accent-2));
        }
        .modern-invoice-table-wrap {
            overflow-x: auto;
            border: 1px solid var(--mi-line);
            border-radius: 22px;
            background: var(--mi-card);
        }
        .modern-invoice-table {
            min-width: 860px;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        .modern-invoice-table th {
            background: var(--mi-soft);
            color: var(--mi-muted);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: .08em;
            text-align: left;
            text-transform: uppercase;
            padding: 15px 16px;
        }
        .modern-invoice-table td {
            border-top: 1px solid var(--mi-line);
            padding: 16px;
            vertical-align: top;
        }
        .modern-invoice-table tbody tr:hover td {
            background: rgba(37, 99, 235, .04);
        }
        .modern-invoice-table .num {
            text-align: right;
            white-space: nowrap;
        }
        .modern-invoice-item-title {
            display: block;
            margin-bottom: 5px;
            font-weight: 800;
        }
        .modern-invoice-tax-line {
            display: block;
            color: var(--mi-muted);
            font-size: 12px;
            line-height: 1.65;
        }
        .modern-invoice-footer-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
            gap: 22px;
            margin-top: 24px;
        }
        .modern-invoice-totals {
            display: grid;
            gap: 10px;
        }
        .modern-invoice-total-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            color: var(--mi-muted);
        }
        .modern-invoice-total-row strong {
            color: var(--mi-ink);
        }
        .modern-invoice-total-row.due {
            align-items: center;
            margin-top: 6px;
            border-top: 1px solid var(--mi-line);
            padding-top: 14px;
            color: var(--mi-danger);
            font-size: 20px;
            font-weight: 850;
        }
        .modern-invoice-total-row.due strong {
            color: var(--mi-danger);
        }
        .modern-invoice-qr {
            max-width: 98px;
            margin-top: 14px;
        }
        .modern-invoice-compact .modern-invoice-note,
        .modern-invoice-compact .modern-invoice-words,
        .modern-invoice-compact .modern-invoice-qr {
            display: none;
        }
        @media (max-width: 860px) {
            .modern-invoice-hero,
            .modern-invoice-grid,
            .modern-invoice-footer-grid,
            .modern-invoice-address {
                grid-template-columns: 1fr;
            }
            .modern-invoice-hero,
            .modern-invoice-body {
                padding: 24px;
            }
        }
        @media print {
            .modern-invoice-toolbar,
            .hidden-print {
                display: none !important;
            }
            .modern-invoice {
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }
            .modern-invoice-shell {
                color: #101828;
            }
        }
    </style>

    <div class="modern-invoice-toolbar hidden-print">
        <div class="modern-invoice-actions">
            <button type="button" class="modern-invoice-btn" data-modern-invoice-theme>
                <i data-lucide="palette" class="h-4 w-4"></i>
                <span><?= lang('theme') ?></span>
            </button>
            <button type="button" class="modern-invoice-btn" data-modern-invoice-compact>
                <i data-lucide="rows-3" class="h-4 w-4"></i>
                <span><?= lang('compact') ?></span>
            </button>
        </div>
        <button type="button" class="modern-invoice-btn" onclick="print_sales_details('sales_details')">
            <i data-lucide="printer" class="h-4 w-4"></i>
            <span><?= lang('print') ?></span>
        </button>
    </div>

    <article class="modern-invoice">
        <header class="modern-invoice-hero">
            <div>
                <div class="modern-invoice-brand">
                    <img class="modern-invoice-logo" src="<?= $logo ?>" alt="<?= html_escape($company_name) ?>">
                    <div>
                        <p class="modern-invoice-kicker"><?= html_escape($company_name) ?></p>
                        <h1 class="modern-invoice-title"><?= html_escape($invoice_title) ?></h1>
                    </div>
                </div>
            </div>
            <div class="modern-invoice-meta">
                <div class="modern-invoice-meta-card">
                    <span><?= lang('invoice') ?></span>
                    <strong><?= html_escape($invoice_number) ?></strong>
                </div>
                <div class="modern-invoice-meta-card">
                    <span><?= lang('invoice_date') ?></span>
                    <strong><?= html_escape($invoice_date) ?></strong>
                </div>
                <div class="modern-invoice-meta-card">
                    <span><?= lang('due_date') ?></span>
                    <strong><?= html_escape($due_date) ?></strong>
                </div>
                <div class="modern-invoice-meta-card">
                    <span><?= lang('total') ?></span>
                    <strong><?= display_money($total, $currency->symbol) ?></strong>
                </div>
            </div>
        </header>

        <div class="modern-invoice-body">
            <section class="modern-invoice-grid">
                <div class="modern-invoice-panel modern-invoice-address">
                    <div>
                        <span class="modern-invoice-address-label"><?= lang('our_info') ?></span>
                        <h4><?= html_escape($company_name) ?></h4>
                        <p>
                            <?= html_escape(config_item('company_email')) ?>
                            <?= !empty(config_item('company_address')) ? '<br>' . html_escape(config_item('company_address')) : '' ?>
                            <?= !empty(config_item('company_city')) ? '<br>' . html_escape(config_item('company_city')) : '' ?>
                            <?= !empty(config_item('company_zip_code')) ? ', ' . html_escape(config_item('company_zip_code')) : '' ?>
                            <?= !empty(config_item('company_country')) ? '<br>' . html_escape(config_item('company_country')) : '' ?>
                            <?= !empty(config_item('company_phone')) ? '<br>' . html_escape(lang('phone')) . ': ' . html_escape(config_item('company_phone')) : '' ?>
                            <?= !empty(config_item('vat_number')) ? '<br>' . html_escape(lang('vat_number')) . ': ' . html_escape(config_item('vat_number')) : '' ?>
                        </p>
                    </div>
                    <div>
                        <span class="modern-invoice-address-label"><?= lang('customer') ?></span>
                        <h4><?= html_escape(!empty($sales_info->name) ? $sales_info->name : '') ?></h4>
                        <p>
                            <?= !empty($sales_info->address) ? html_escape($sales_info->address) : '' ?>
                            <?= !empty($sales_info->city) ? '<br>' . html_escape($sales_info->city) : '' ?>
                            <?= !empty($sales_info->zipcode) ? ', ' . html_escape($sales_info->zipcode) : '' ?>
                            <?= !empty($sales_info->country) ? '<br>' . html_escape($sales_info->country) : '' ?>
                            <?= !empty($sales_info->phone) ? '<br>' . html_escape(lang('phone')) . ': ' . html_escape($sales_info->phone) : '' ?>
                            <?= !empty($sales_info->vat) ? '<br>' . html_escape(lang('vat_number')) . ': ' . html_escape($sales_info->vat) : '' ?>
                        </p>
                    </div>
                </div>

                <aside class="modern-invoice-panel">
                    <div class="modern-invoice-status">
                        <span class="modern-invoice-summary-label"><?= lang('status') ?></span>
                        <div><?= !empty($sales_info->status) ? $sales_info->status : '' ?></div>
                    </div>
                    <div class="modern-invoice-progress"><span></span></div>
                    <div class="modern-invoice-total-row" style="margin-top: 12px;">
                        <span><?= lang('paid') ?></span>
                        <strong><?= display_money($paid, $currency->symbol) ?></strong>
                    </div>
                    <div class="modern-invoice-total-row">
                        <span><?= lang('due') ?></span>
                        <strong><?= display_money($due, $currency->symbol) ?></strong>
                    </div>
                    <?php if (!empty($qrcode)) { ?>
                        <div class="modern-invoice-qr"><?= $qrcode ?></div>
                    <?php } ?>
                </aside>
            </section>

            <section class="modern-invoice-table-wrap">
                <table class="modern-invoice-table">
                    <thead>
                    <tr>
                        <th style="width: 54px;">#</th>
                        <th><?= lang('items') ?></th>
                        <?php if ($show_hsn) { ?><th><?= lang('hsn_code') ?></th><?php } ?>
                        <th class="num"><?= $qty_heading ?></th>
                        <th class="num"><?= lang('price') ?></th>
                        <th><?= lang('tax') ?></th>
                        <th class="num"><?= lang('total') ?></th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php if (!empty($all_items)) {
                        foreach ($all_items as $key => $v_item) {
                            $item_name = !empty($v_item->item_name) ? $v_item->item_name : $v_item->item_desc;
                            $item_tax_name = !empty($v_item->item_tax_name) ? json_decode($v_item->item_tax_name) : array();
                            ?>
                            <tr>
                                <td><?= $key + 1 ?></td>
                                <td>
                                    <strong class="modern-invoice-item-title"><?= html_escape($item_name) ?></strong>
                                    <?php if (!empty($v_item->item_desc)) { ?>
                                        <span class="modern-invoice-tax-line"><?= nl2br(html_escape($v_item->item_desc)) ?></span>
                                    <?php } ?>
                                </td>
                                <?php if ($show_hsn) { ?><td><?= html_escape($v_item->hsn_code) ?></td><?php } ?>
                                <td class="num"><?= html_escape($v_item->quantity . ' ' . $v_item->unit) ?></td>
                                <td class="num"><?= display_money($v_item->unit_cost, $currency->symbol) ?></td>
                                <td>
                                    <?php
                                    if (!empty($item_tax_name)) {
                                        foreach ($item_tax_name as $v_tax_name) {
                                            $i_tax_name = explode('|', $v_tax_name);
                                            $rate = !empty($i_tax_name[1]) ? $i_tax_name[1] : 0;
                                            echo '<span class="modern-invoice-tax-line">' . html_escape($i_tax_name[0]) . ' (' . html_escape($rate) . '%) ' . display_money($v_item->total_cost / 100 * $rate, $currency->symbol) . '</span>';
                                        }
                                    } else {
                                        echo '<span class="modern-invoice-tax-line">-</span>';
                                    }
                                    ?>
                                </td>
                                <td class="num"><strong><?= display_money($v_item->total_cost, $currency->symbol) ?></strong></td>
                            </tr>
                        <?php }
                    } else { ?>
                        <tr><td colspan="<?= $show_hsn ? 7 : 6 ?>"><?= lang('nothing_to_display') ?></td></tr>
                    <?php } ?>
                    </tbody>
                </table>
            </section>

            <section class="modern-invoice-footer-grid">
                <div class="modern-invoice-panel">
                    <?php if (!empty($sales_info->notes)) { ?>
                        <p class="modern-invoice-note"><?= nl2br(html_escape($sales_info->notes)) ?></p>
                    <?php } ?>
                    <?php
                    $due_amount = !empty($due) && $due > 0 ? $due : $total;
                    if (config_item('amount_to_words') == 'Yes' && !empty($due_amount) && $due_amount > 0) { ?>
                        <p class="modern-invoice-words" style="margin-top: 16px;">
                            <strong><?= lang('num_word') ?>:</strong>
                            <?= number_to_word($currency->code, $due_amount); ?>
                        </p>
                    <?php } ?>
                </div>

                <aside class="modern-invoice-panel modern-invoice-totals">
                    <div class="modern-invoice-total-row">
                        <span><?= lang('sub_total') ?></span>
                        <strong><?= display_money($subtotal, $currency->symbol) ?></strong>
                    </div>
                    <?php if ($discount > 0) { ?>
                        <div class="modern-invoice-total-row">
                            <span><?= lang('discount') ?><?= !empty($sales_info->discount_percent) ? ' (' . html_escape($sales_info->discount_percent) . '%)' : '' ?></span>
                            <strong><?= display_money($discount, $currency->symbol) ?></strong>
                        </div>
                    <?php } ?>
                    <?php foreach ($tax_rows as $tax_row) { ?>
                        <div class="modern-invoice-total-row">
                            <span><?= html_escape($tax_row['name']) ?> <small>(<?= html_escape($tax_row['rate']) ?>%)</small></span>
                            <strong><?= display_money($tax_row['amount'], $currency->symbol) ?></strong>
                        </div>
                    <?php } ?>
                    <?php if ($tax_total > 0) { ?>
                        <div class="modern-invoice-total-row">
                            <span><?= lang('total') . ' ' . lang('tax') ?></span>
                            <strong><?= display_money($tax_total, $currency->symbol) ?></strong>
                        </div>
                    <?php } ?>
                    <?php if ($adjustment > 0) { ?>
                        <div class="modern-invoice-total-row">
                            <span><?= lang('adjustment') ?></span>
                            <strong><?= display_money($adjustment, $currency->symbol) ?></strong>
                        </div>
                    <?php } ?>
                    <?php do_action('multicurrency_in_invoice', $sales_info); ?>
                    <div class="modern-invoice-total-row">
                        <span><?= lang('total') ?></span>
                        <strong><?= display_money($total, $currency->symbol) ?></strong>
                    </div>
                    <?php if ($paid > 0) { ?>
                        <div class="modern-invoice-total-row">
                            <span><?= lang('paid') ?></span>
                            <strong><?= display_money($paid, $currency->symbol) ?></strong>
                        </div>
                    <?php } ?>
                    <div class="modern-invoice-total-row due">
                        <span><?= lang('due') ?></span>
                        <strong><?= display_money($due, $currency->symbol) ?></strong>
                    </div>
                </aside>
            </section>
        </div>
    </article>
</div>

<?php include_once 'assets/js/sales.php'; ?>

<script type="text/javascript">
    (function () {
        var root = document.querySelector('[data-modern-invoice]');
        if (!root) return;
        var themeButton = root.querySelector('[data-modern-invoice-theme]');
        var compactButton = root.querySelector('[data-modern-invoice-compact]');
        if (themeButton) {
            themeButton.addEventListener('click', function () {
                root.setAttribute('data-tone', root.getAttribute('data-tone') === 'dark' ? 'light' : 'dark');
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            });
        }
        if (compactButton) {
            compactButton.addEventListener('click', function () {
                root.classList.toggle('modern-invoice-compact');
            });
        }
        if (typeof init_items_sortable === 'function') {
            init_items_sortable(true);
        }
    })();

    function print_sales_details(sales_details) {
        var printContents = document.getElementById(sales_details).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>
