<?php
$status_label = !empty($credit_note_info->status) ? lang($credit_note_info->status) : lang('credit_note');
$status_value = strtolower((string) ($credit_note_info->status ?? ''));
$status_class = 'bg-slate-100 text-slate-700 border-slate-200';
if ($status_value === 'open') {
    $status_class = 'bg-emerald-50 text-emerald-700 border-emerald-200';
} elseif ($status_value === 'refund') {
    $status_class = 'bg-blue-50 text-blue-700 border-blue-200';
} elseif ($status_value === 'void') {
    $status_class = 'bg-rose-50 text-rose-700 border-rose-200';
}

$activities_info = !empty($activities_info) ? $activities_info : array();
$history_page = !empty($history_page) ? (int) $history_page : 1;
$history_pages = !empty($history_pages) ? (int) $history_pages : 1;
$history_query = $this->input->get();
unset($history_query['history_page']);
?>

<div class="invoice-modern space-y-6">
    <?= message_box('success') ?>
    <?= message_box('error') ?>

    <div class="rounded-2xl border border-border bg-card p-6 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('credit_note_history') ?></p>
                <div class="flex flex-wrap items-center gap-3">
                    <h1 class="text-2xl font-semibold text-foreground">#<?= html_escape($credit_note_info->reference_no) ?></h1>
                    <span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold <?= $status_class ?>">
                        <?= html_escape($status_label) ?>
                    </span>
                    <?php if (!empty($credit_note_info->credit_note_date)) { ?>
                        <span class="inline-flex items-center rounded-full border border-border px-2.5 py-1 text-xs font-semibold text-muted-foreground">
                            <?= display_date($credit_note_info->credit_note_date) ?>
                        </span>
                    <?php } ?>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="<?= base_url() ?>admin/credit_note/credit_note_details/<?= $credit_note_info->credit_note_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('details') ?>
                </a>
                <a href="<?= base_url() ?>admin/credit_note/index/email_credit_note/<?= $credit_note_info->credit_note_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="mail" class="h-4 w-4"></i>
                    <?= lang('email_credit_note') ?>
                </a>
                <a href="<?= base_url() ?>admin/credit_note/createcreditnote/edit_credit_note/<?= $credit_note_info->credit_note_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="square-pen" class="h-4 w-4"></i>
                    <?= lang('edit') ?>
                </a>
                <a href="<?= base_url() ?>admin/credit_note/createcreditnote" data-original-title="<?= lang('new') . ' ' . lang('credit_note') ?>" data-toggle="tooltip" data-placement="top" class="inline-flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-xs font-semibold text-primary hover:bg-primary/10">
                    <i data-lucide="plus" class="h-4 w-4"></i>
                    <?= lang('new') . ' ' . lang('credit_note') ?>
                </a>
            </div>
        </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-[320px_minmax(0,1fr)]">
        <aside><?= isset($credit_note_sidebar_html) ? $credit_note_sidebar_html : '' ?></aside>

        <section class="space-y-4">
            <div class="grid gap-3 md:grid-cols-3">
                <div class="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="history" class="h-5 w-5"></i>
                        </div>
                        <div>
                            <div class="text-2xl font-bold text-foreground"><?= !empty($history_total) ? (int) $history_total : count($activities_info) ?></div>
                            <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground"><?= lang('activities') ?></div>
                        </div>
                    </div>
                </div>
                <div class="rounded-xl border border-border bg-card p-4 shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-emerald-50 p-2.5 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                            <i data-lucide="wallet" class="h-5 w-5"></i>
                        </div>
                        <div>
                            <?php
                            $header_currency = $this->credit_note_model->client_currency_symbol($credit_note_info->client_id);
                            if (empty($header_currency)) {
                                $header_currency = $this->credit_note_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
                            }
                            ?>
                            <div class="text-2xl font-bold text-foreground">
                                <?= display_money($this->credit_note_model->credit_note_calculation('credit_note_amount', $credit_note_info->credit_note_id), !empty($header_currency->symbol) ? $header_currency->symbol : '$'); ?>
                            </div>
                            <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground"><?= lang('amount') ?></div>
                        </div>
                    </div>
                </div>
                <div class="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="clock-3" class="h-5 w-5"></i>
                        </div>
                        <div>
                            <div class="text-2xl font-bold text-foreground"><?= !empty($activities_info) ? time_ago($activities_info[0]->activity_date) : '--' ?></div>
                            <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Latest Activity</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
                <div class="border-b border-slate-200 px-5 py-4 dark:border-slate-700">
                    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('credit_note_history') ?></h3>
                </div>
                <div class="p-5" id="chat-box">
                    <?php if (!empty($activities_info)) { ?>
                        <div class="space-y-4">
                            <?php foreach ($activities_info as $v_activities) { ?>
                                <?php $activity_name = !empty($v_activities->actor_name) ? $v_activities->actor_name : lang('system'); ?>
                                <div class="relative pl-10">
                                    <span class="absolute left-4 top-0 bottom-0 w-px bg-slate-200 dark:bg-slate-700"></span>
                                    <span class="absolute left-[11px] top-6 h-2.5 w-2.5 rounded-full border border-indigo-300 bg-indigo-500 dark:border-indigo-800"></span>
                                    <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
                                        <div class="flex flex-wrap items-start justify-between gap-3">
                                            <div class="min-w-0">
                                                <div class="text-sm font-semibold text-slate-800 dark:text-slate-100">
                                                    <?php if (!empty($v_activities->actor_user_id)) { ?>
                                                        <a href="<?= base_url() ?>admin/user/user_details/<?= $v_activities->actor_user_id ?>" class="text-primary hover:underline">
                                                            <?= html_escape($activity_name) ?>
                                                        </a>
                                                    <?php } else { ?>
                                                        <?= html_escape($activity_name) ?>
                                                    <?php } ?>
                                                </div>
                                                <div class="text-xs text-slate-500 dark:text-slate-400" data-toggle="tooltip" data-placement="top" title="<?= display_datetime($v_activities->activity_date) ?>">
                                                    <?= time_ago($v_activities->activity_date); ?>
                                                </div>
                                            </div>
                                            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                                <?= lang('credit_note') ?>
                                            </span>
                                        </div>
                                        <div class="mt-3 leading-relaxed">
                                            <?= sprintf(lang($v_activities->activity)) ?>
                                            <?php if (!empty($v_activities->value1)) { ?>
                                                <strong><?= html_escape($v_activities->value1) ?></strong>
                                            <?php } ?>
                                        </div>
                                        <?php if (!empty($v_activities->value2)) { ?>
                                            <div class="mt-2 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-100">
                                                <?= html_escape($v_activities->value2) ?>
                                            </div>
                                        <?php } ?>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                        <?php if ($history_pages > 1) { ?>
                            <div class="mt-6 flex items-center justify-between gap-3 border-t border-slate-200 pt-4 dark:border-slate-700">
                                <?php if ($history_page > 1) { ?>
                                    <a href="<?= base_url('admin/credit_note/index/credit_note_history/' . $credit_note_info->credit_note_id) . '?' . http_build_query(array_merge($history_query, array('history_page' => $history_page - 1))) ?>" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200">Prev</a>
                                <?php } else { ?>
                                    <span class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-500">Prev</span>
                                <?php } ?>
                                <span class="text-sm font-medium text-slate-500 dark:text-slate-300"><?= $history_page ?> of <?= $history_pages ?></span>
                                <?php if ($history_page < $history_pages) { ?>
                                    <a href="<?= base_url('admin/credit_note/index/credit_note_history/' . $credit_note_info->credit_note_id) . '?' . http_build_query(array_merge($history_query, array('history_page' => $history_page + 1))) ?>" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200">Next</a>
                                <?php } else { ?>
                                    <span class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-500">Next</span>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    <?php } else { ?>
                        <div class="rounded-xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
                            <?= lang('nothing_to_display') ?>
                        </div>
                    <?php } ?>
                </div>
            </div>
        </section>
    </div>
</div>
