<div class="invoice-modern">
    <div class="grid gap-5 lg:grid-cols-12">
        <aside class="lg:col-span-4 xl:col-span-3">
            <div class="rounded-2xl border border-border bg-card shadow-sm">
                <div class="border-b border-border px-5 py-4">
                    <h3 class="text-sm font-semibold text-foreground"><?= lang('all_invoices') ?></h3>
                    <p class="mt-1 text-xs text-muted-foreground"><?= lang('invoice') ?> <?= lang('history') ?></p>
                </div>
                <div class="max-h-[34rem] space-y-2 overflow-y-auto p-3">
                    <?php
                    $all_invoices_info = !empty($all_invoices_info)
                        ? $all_invoices_info
                        : $this->db->where(array('client_id' => $this->session->userdata('client_id')))->get('tbl_invoices')->result();
                    if (!empty($all_invoices_info)) {
                        foreach ($all_invoices_info as $v_invoices) {
                            $is_active_invoice = !empty($invoice_info->invoices_id) && (int) $v_invoices->invoices_id === (int) $invoice_info->invoices_id;
                            $client_info = $this->invoice_model->check_by(array('client_id' => $v_invoices->client_id), 'tbl_client');
                            $client_name = !empty($client_info->name) ? $client_info->name : '-';
                            $currency = !empty($client_info)
                                ? $this->invoice_model->client_currency_symbol($v_invoices->client_id)
                                : $this->invoice_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
                            $invoice_status = $this->invoice_model->get_payment_status($v_invoices->invoices_id);
                            $status_class = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300';
                            if ($invoice_status == lang('fully_paid')) {
                                $status_class = 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200';
                            } elseif ($invoice_status == lang('partially_paid')) {
                                $status_class = 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200';
                            } elseif ($invoice_status == lang('sent')) {
                                $status_class = 'bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200';
                            } elseif ($invoice_status == lang('draft')) {
                                $status_class = 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300';
                            } else {
                                $status_class = 'bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200';
                            }
                    ?>
                            <a href="<?= base_url() ?>client/invoice/manage_invoice/invoice_history/<?= $v_invoices->invoices_id ?>"
                               class="block rounded-xl border px-4 py-3 transition <?= $is_active_invoice ? 'border-indigo-500 bg-indigo-50 dark:border-indigo-400 dark:bg-indigo-500/10' : 'border-transparent hover:border-border hover:bg-muted/50' ?>">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-semibold text-foreground"><?= html_escape($client_name) ?></p>
                                        <p class="mt-1 truncate text-xs text-muted-foreground"><?= html_escape($v_invoices->reference_no) ?></p>
                                    </div>
                                    <p class="shrink-0 text-sm font-semibold text-foreground">
                                        <?= display_money($this->invoice_model->get_invoice_cost($v_invoices->invoices_id), $currency->symbol); ?>
                                    </p>
                                </div>
                                <span class="mt-3 inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold <?= $status_class ?>">
                                    <?= html_escape($invoice_status) ?>
                                </span>
                            </a>
                    <?php
                        }
                    } else {
                    ?>
                        <div class="px-4 py-8 text-center text-sm text-muted-foreground"><?= lang('no_data_found') ?></div>
                    <?php } ?>
                </div>
            </div>
        </aside>

        <section class="lg:col-span-8 xl:col-span-9">
            <div class="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-5 py-4">
                    <div>
                        <h3 class="text-base font-semibold text-foreground"><?= lang('invoice_history') ?></h3>
                        <p class="mt-1 text-xs text-muted-foreground">
                            <?= html_escape($invoice_info->reference_no) ?>
                        </p>
                    </div>
                    <a href="<?= base_url() ?>client/invoice/manage_invoice/invoice_details/<?= $invoice_info->invoices_id ?>"
                       class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
                        <i data-lucide="file-text" class="h-4 w-4"></i>
                        <?= lang('invoice') ?>
                    </a>
                </div>

                <div class="p-5">
                    <?php
                    $activities_info = $this->db
                        ->where(array('module' => 'invoice', 'module_field_id' => $invoice_info->invoices_id))
                        ->order_by('activity_date', 'DESC')
                        ->get('tbl_activities')
                        ->result();
                    if (!empty($activities_info)) {
                        foreach ($activities_info as $index => $v_activities) {
                            $profile_info = $this->db->where(array('user_id' => $v_activities->user))->get('tbl_account_details')->row();
                            $actor_name = !empty($profile_info->fullname) ? $profile_info->fullname : lang('system');
                    ?>
                            <div class="relative <?= $index + 1 < count($activities_info) ? 'pb-5' : '' ?> pl-7">
                                <?php if ($index + 1 < count($activities_info)) { ?>
                                    <span class="absolute left-[5px] top-4 h-full w-px bg-border"></span>
                                <?php } ?>
                                <span class="absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full bg-indigo-500"></span>
                                <div class="rounded-xl border border-border bg-background/40 px-4 py-3">
                                    <div class="flex flex-wrap items-center justify-between gap-2">
                                        <p class="text-sm text-foreground">
                                            <strong><?= html_escape($actor_name) ?></strong>
                                            <?= sprintf(lang($v_activities->activity)) ?>
                                            <?php if (!empty($v_activities->value1)) { ?>
                                                <strong><?= html_escape($v_activities->value1) ?></strong>
                                            <?php } ?>
                                        </p>
                                        <span title="<?= display_datetime($v_activities->activity_date) ?>" class="text-xs text-muted-foreground">
                                            <?= time_ago($v_activities->activity_date); ?>
                                        </span>
                                    </div>
                                    <?php if (!empty($v_activities->value2)) { ?>
                                        <p class="mt-2 text-sm font-semibold text-foreground"><?= html_escape($v_activities->value2) ?></p>
                                    <?php } ?>
                                </div>
                            </div>
                    <?php
                        }
                    } else {
                    ?>
                        <div class="rounded-xl border border-dashed border-border px-5 py-10 text-center">
                            <i data-lucide="history" class="mx-auto h-8 w-8 text-muted-foreground"></i>
                            <p class="mt-3 text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></p>
                        </div>
                    <?php } ?>
                </div>
            </div>
        </section>
    </div>
</div>
