<?php
$edited = can_action('57', 'edited');
$deleted = can_action('57', 'deleted');
$project_invoice_data = isset($project_invoice_data) && is_array($project_invoice_data) ? $project_invoice_data : array();
$currency_symbol = isset($project_invoice_data['currency_symbol']) ? $project_invoice_data['currency_symbol'] : '$';
$all_invoice_info = isset($project_invoice_data['rows']) ? $project_invoice_data['rows'] : array();
$total_amount = isset($project_invoice_data['total_amount']) ? (float) $project_invoice_data['total_amount'] : 0;
$total_due = isset($project_invoice_data['total_due']) ? (float) $project_invoice_data['total_due'] : 0;
$overdue_count = isset($project_invoice_data['overdue_count']) ? (int) $project_invoice_data['overdue_count'] : 0;
$invoice_count = isset($project_invoice_data['invoice_count']) ? (int) $project_invoice_data['invoice_count'] : 0;
?>

<div class="project-overview-shell space-y-5">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100"><?= lang('invoice') ?></h3>
            <p class="text-sm text-slate-500">Billing records, receivables, and invoice collection status.</p>
        </div>
    </div>

    <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-blue-50 p-2.5 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
                    <i data-lucide="receipt" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= $invoice_count ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400"><?= lang('invoice') ?></div>
                </div>
            </div>
        </div>
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-violet-50 p-2.5 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400">
                    <i data-lucide="wallet" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= display_money($total_amount, $currency_symbol) ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400"><?= lang('amount') ?></div>
                </div>
            </div>
        </div>
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-amber-50 p-2.5 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
                    <i data-lucide="wallet" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= display_money($total_due, $currency_symbol) ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400"><?= lang('due_amount') ?></div>
                </div>
            </div>
        </div>
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-rose-50 p-2.5 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400">
                    <i data-lucide="alarm-clock" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-rose-600 dark:text-rose-300"><?= $overdue_count ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400"><?= lang('overdue') ?></div>
                </div>
            </div>
        </div>
    </div>

    <div class="project-section-card overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3">
            <div>
                <h4 class="text-sm font-semibold text-foreground">Invoice Ledger</h4>
                <p class="text-xs text-muted-foreground">Reference numbers, due dates, and collection state.</p>
            </div>
            <div class="flex flex-wrap gap-2 text-xs">
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-violet-500"></span><?= display_money($total_amount, $currency_symbol) ?></span>
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-rose-500"></span><?= $overdue_count ?> <?= lang('overdue') ?></span>
            </div>
        </div>
        <div class="overflow-x-auto overflow-y-visible">
            <table id="table-invoice" class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                    <tr>
                        <th class="px-4 py-3 text-left"><?= lang('invoice') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('due_date') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('amount') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('due_amount') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('status') ?></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    <?php if (!empty($all_invoice_info)) {
                        foreach ($all_invoice_info as $v_invoices) {
                            if ($v_invoices->payment_status == lang('fully_paid')) {
                                $invoice_status = lang('fully_paid');
                                $label = 'bg-emerald-50 text-emerald-700';
                            } elseif ($v_invoices->emailed == 'Yes') {
                                $invoice_status = lang('sent');
                                $label = 'bg-blue-50 text-blue-700';
                            } else {
                                $invoice_status = lang('draft');
                                $label = 'bg-slate-100 text-slate-700';
                            }
                    ?>
                        <tr class="text-slate-700 transition hover:bg-slate-50/70 dark:text-slate-200 dark:hover:bg-slate-800/50"><td class="px-4 py-3"><a class="font-medium text-primary hover:underline dark:text-sky-300" href="<?= base_url() ?>admin/invoice/manage_invoice/invoice_details/<?= $v_invoices->invoices_id ?>"><?= $v_invoices->reference_no ?></a>
                            </td>
                            <td class="px-4 py-3">
                                <?= display_date($v_invoices->due_date) ?>
                                <?php
                                $payment_status = $v_invoices->payment_status;
                                if (safe_strtotime($v_invoices->due_date) < safe_strtotime(date('Y-m-d')) && $payment_status != lang('fully_paid')) { ?>
                                    <span class="ml-2 inline-flex rounded-full bg-rose-50 px-2 py-0.5 text-xs text-rose-700"><?= lang('overdue') ?></span>
                                <?php } ?>
                            </td>
                            <td class="px-4 py-3"><?= display_money(isset($v_invoices->display_total) ? $v_invoices->display_total : 0, $currency_symbol) ?></td>
                            <td class="px-4 py-3"><?= display_money(isset($v_invoices->display_due) ? $v_invoices->display_due : 0, $currency_symbol) ?></td>
                            <td class="px-4 py-3">
                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs <?= $label ?>"><?= $invoice_status ?></span>
                                <?php if ($v_invoices->recurring == 'Yes') { ?>
                                    <span class="ml-2 inline-flex rounded-full bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700" data-tooltip="<?= lang('recurring') ?>">
                                        <i data-lucide="repeat"></i>
                                    </span>
                                <?php } ?>
                            </td>
                        </tr>
                    <?php }
                    } else { ?>
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400"><?= lang('no_data_found') ?></td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
    </div>
</div>


