<?php
$proposal_sidebar_html = isset($proposal_sidebar_html) ? $proposal_sidebar_html : '';
$proposal_info = !empty($proposals_info) ? $proposals_info : null;

$proposal_currency = default_currency();
if (!empty($proposal_info)) {
    if ($proposal_info->module == 'client') {
        $proposal_currency = client_currency($proposal_info->module_id);
    }
}

$proposal_total = !empty($proposal_info) ? (float) $this->proposal_model->proposal_calculation('total', $proposal_info->proposals_id) : 0;
$proposal_subtotal = !empty($proposal_info) ? (float) $this->proposal_model->proposal_calculation('proposal_cost', $proposal_info->proposals_id) : 0;
$proposal_discount = !empty($proposal_info) ? (float) $this->proposal_model->proposal_calculation('discount', $proposal_info->proposals_id) : 0;
$proposal_due_amount = $proposal_total;
$proposal_agent = !empty($proposal_info->user_id) ? fullname($proposal_info->user_id) : '-';
$proposal_status = !empty($proposal_info) ? ucfirst(strtolower((string) $proposal_info->status)) : '-';
$proposal_is_overdue = !empty($proposal_info) && (safe_strtotime($proposal_info->due_date) < safe_strtotime(date('Y-m-d'))) && ($proposal_info->status === 'pending' || $proposal_info->status === 'draft');
$proposal_status_classes = 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300';
if (!empty($proposal_info)) {
    if ($proposal_info->status === 'accepted') {
        $proposal_status_classes = 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/30 dark:text-emerald-300';
    } elseif ($proposal_info->status === 'declined' || $proposal_info->status === 'cancelled') {
        $proposal_status_classes = 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-900/30 dark:text-rose-300';
    } elseif ($proposal_info->status === 'sent' || $proposal_info->status === 'open') {
        $proposal_status_classes = 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800/60 dark:bg-sky-900/30 dark:text-sky-300';
    } elseif ($proposal_info->status === 'draft') {
        $proposal_status_classes = 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300';
    }
}

$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="flex gap-4 min-h-screen bg-background p-4">
    <?= message_box('success') ?>
    <?= message_box('error') ?>
    <aside class="w-80 flex-shrink-0">
        <?= $proposal_sidebar_html ?>
    </aside>

    <section class="flex-1 min-w-0">
        <div class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
            <div class="border-b border-border px-5 py-5 lg:px-6 lg:py-6">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div class="space-y-3">
                        <div class="flex items-center gap-3">
                            <span class="inline-flex items-center rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.22em] text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/20 dark:text-emerald-300">
                                <i data-lucide="circle-check" class="mr-1 h-3.5 w-3.5"></i>
                                <?= html_escape($proposal_status === '-' ? 'Status' : $proposal_status) ?>
                            </span>
                        </div>

                        <div>
                            <h1 class="text-xl font-extrabold tracking-tight text-foreground sm:text-2xl lg:text-[1.75rem]">
                                <?= !empty($proposal_info->reference_no) ? html_escape($proposal_info->reference_no) : lang('proposal_history') ?>
                            </h1>
                            <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs font-semibold text-muted-foreground">
                                <div class="inline-flex items-center gap-2">
                                    <i data-lucide="calendar-days" class="h-4 w-4 text-slate-500 dark:text-slate-400"></i>
                                    <span><?= lang('created') ?>: <?= !empty($proposal_info) ? display_date($proposal_info->proposal_date) : '-' ?></span>
                                </div>
                                <span class="text-slate-300 dark:text-slate-600">•</span>
                                <div class="inline-flex items-center gap-2">
                                    <i data-lucide="clock-3" class="h-4 w-4 text-slate-500 dark:text-slate-400"></i>
                                    <span><?= lang('due_date') ?>: <?= !empty($proposal_info) ? display_date($proposal_info->due_date) : '-' ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <?php if (!empty($proposal_info)) { ?>
                        <div class="flex flex-wrap items-center gap-3">
                            <a href="<?= base_url('admin/proposals/proposals_details/' . $proposal_info->proposals_id) ?>"
                               class="inline-flex h-9 items-center gap-2 rounded-xl border border-border bg-card px-3.5 text-xs font-semibold text-foreground shadow-sm transition hover:bg-muted sm:px-4">
                                <i data-lucide="file-text" class="h-4 w-4"></i>
                                <span><?= lang('view') . ' ' . lang('proposal') ?></span>
                            </a>
                            <a href="<?= base_url('admin/proposals/pdf_proposals/' . $proposal_info->proposals_id) ?>"
                               class="inline-flex h-9 items-center gap-2 rounded-xl bg-primary px-3.5 text-xs font-semibold text-primary-foreground shadow-sm transition hover:opacity-95 sm:px-4">
                                <i data-lucide="download" class="h-4 w-4"></i>
                                <span><?= lang('download') . ' ' . lang('pdf') ?></span>
                            </a>
                        </div>
                    <?php } ?>
                </div>
            </div>

            <div class="px-5 pb-5 pt-5 lg:px-6">
                <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-2xl border border-border bg-muted/40 px-4 py-4">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground">
                            <i data-lucide="calendar-days" class="mr-1 inline h-3.5 w-3.5"></i>
                            <?= lang('proposal_date') ?>
                        </div>
                        <div class="mt-3 text-lg font-semibold tracking-tight text-foreground sm:text-xl">
                            <?= !empty($proposal_info) ? display_date($proposal_info->proposal_date) : '-' ?>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-border bg-muted/40 px-4 py-4">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground">
                            <i data-lucide="clock-3" class="mr-1 inline h-3.5 w-3.5"></i>
                            <?= lang('due_date') ?>
                        </div>
                        <div class="mt-3 text-lg font-semibold tracking-tight <?= $proposal_is_overdue ? 'text-rose-600 dark:text-rose-300' : 'text-foreground' ?> sm:text-xl">
                            <?= !empty($proposal_info) ? display_date($proposal_info->due_date) : '-' ?>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-border bg-muted/40 px-4 py-4">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground">
                            <i data-lucide="user" class="mr-1 inline h-3.5 w-3.5"></i>
                            <?= lang('sales') . ' ' . lang('agent') ?>
                        </div>
                        <div class="mt-3 text-lg font-semibold tracking-tight text-foreground sm:text-xl">
                            <?= html_escape($proposal_agent) ?>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-primary/20 bg-primary/5 px-4 py-4">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                            <?= lang('amount') . ' ' . lang('due') ?>
                        </div>
                        <div class="mt-3 text-xl font-extrabold tracking-tight text-foreground sm:text-2xl">
                            <?= display_money($proposal_due_amount, $proposal_currency) ?>
                        </div>
                    </div>
                </div>

                <div class="mt-4 grid gap-3 lg:grid-cols-2">
                    <div class="rounded-2xl border border-border bg-card px-5 py-5 shadow-sm">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground">
                            <i data-lucide="building-2" class="mr-1 inline h-3.5 w-3.5"></i>
                            <?= lang('our_info') ?>
                        </div>
                        <h3 class="mt-4 text-lg font-bold tracking-tight text-foreground sm:text-xl">
                            <?= config_item('company_name') ?>
                        </h3>
                        <div class="mt-3 space-y-1.5 text-xs text-muted-foreground">
                            <div class="flex items-start gap-2">
                                <i data-lucide="map-pin" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500 dark:text-slate-400"></i>
                                <span><?= nl2br(html_escape(config_item('company_address'))) ?></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="phone" class="h-4 w-4 shrink-0 text-slate-500 dark:text-slate-400"></i>
                                <span><?= html_escape(config_item('company_phone')) ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-primary/20 bg-card px-5 py-5 shadow-sm">
                        <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground">
                            <i data-lucide="user" class="mr-1 inline h-3.5 w-3.5"></i>
                            <?= lang('prepared_for') ?>
                        </div>
                        <h3 class="mt-4 text-lg font-bold tracking-tight text-foreground sm:text-xl">
                            <?= !empty($proposal_info->module) && $proposal_info->module == 'leads' ? html_escape($proposal_info->lead_name) : html_escape(!empty($proposal_info->module_id) ? client_name($proposal_info->module_id) : '-') ?>
                        </h3>
                        <div class="mt-3 space-y-1.5 text-xs text-muted-foreground">
                            <?php if (!empty($proposal_info) && $proposal_info->module == 'client' && !empty($proposal_info->address)) { ?>
                                <div class="flex items-start gap-2">
                                    <i data-lucide="map-pin" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500 dark:text-slate-400"></i>
                                    <span><?= nl2br(html_escape($proposal_info->address)) ?></span>
                                </div>
                            <?php } elseif (!empty($proposal_info->lead_address)) { ?>
                                <div class="flex items-start gap-2">
                                    <i data-lucide="map-pin" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500 dark:text-slate-400"></i>
                                    <span><?= nl2br(html_escape($proposal_info->lead_address)) ?></span>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>

                <section class="mt-4 overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
                    <header class="border-b border-border px-5 py-4">
                        <div class="flex items-center gap-2 text-sm font-semibold text-foreground">
                            <i data-lucide="clock-4" class="h-4.5 w-4.5 text-slate-500 dark:text-slate-400"></i>
                            <span><?= lang('proposal') ?> View History</span>
                        </div>
                    </header>

                    <div class="px-5 py-5" id="chat-box">
                        <?php if (!empty($activities_info)) { ?>
                            <div class="relative space-y-4">
                                <?php foreach ($activities_info as $index => $v_activities) { ?>
                                    <div class="relative pl-14">
                                        <span class="absolute left-[18px] top-3 h-8 w-px bg-border"></span>
                                        <span class="absolute left-0 top-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 text-primary">
                                            <i data-lucide="send" class="h-4 w-4 shrink-0"></i>
                                        </span>

                                        <div class="rounded-2xl border border-border bg-muted/30 px-4 py-3.5">
                                            <div class="text-xs font-semibold text-muted-foreground">
                                                <span data-toggle="tooltip" data-placement="top" title="<?= display_datetime($v_activities->activity_date) ?>">
                                                    <?= time_ago($v_activities->activity_date) ?>
                                                </span>
                                            </div>
                                            <p class="mt-1.5 text-xs leading-6 text-foreground sm:text-sm">
                                                <?php if (!empty($v_activities->actor_name)) { ?>
                                                    <strong class="font-semibold text-primary">
                                                        <a href="<?= base_url() ?>admin/user/user_details/<?= $v_activities->actor_user_id ?>" class="hover:opacity-80">
                                                            <?= html_escape($v_activities->actor_name) ?>
                                                        </a>
                                                    </strong>
                                                <?php } ?>
                                                <?= sprintf(lang($v_activities->activity)) ?>
                                                <strong class="rounded-md border border-border bg-card px-2 py-0.5 text-foreground"><?= html_escape($v_activities->value1) ?></strong>
                                            </p>
                                            <?php if (!empty($v_activities->value2)) { ?>
                                                <p class="mt-1.5 text-xs font-medium text-muted-foreground"><?= html_escape($v_activities->value2) ?></p>
                                            <?php } ?>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                            <?php if ($history_pages > 1) { ?>
                                <div class="mt-4 flex items-center justify-between gap-3 border-t border-border pt-4">
                                    <?php if ($history_page > 1) { ?>
                                        <a href="<?= base_url('admin/proposals/index/proposals_history/' . $proposal_info->proposals_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/proposals/index/proposals_history/' . $proposal_info->proposals_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="flex min-h-[14rem] flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-muted/20 px-6 text-center">
                                <div class="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-muted-foreground">
                                    <i data-lucide="activity" class="h-5 w-5"></i>
                                </div>
                                <h3 class="mt-4 text-base font-semibold text-foreground"><?= lang('nothing_to_display') ?></h3>
                                <p class="mt-1 max-w-md text-sm leading-6 text-muted-foreground">
                                    <?= lang('no_data_found') ?>
                                </p>
                            </div>
                        <?php } ?>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>
