<?php
$sidebar_page = !empty($sidebar_page) ? (int) $sidebar_page : 1;
$sidebar_pages = !empty($sidebar_pages) ? (int) $sidebar_pages : 1;
$sidebar_total = isset($sidebar_total) ? (int) $sidebar_total : 0;
$sidebar_search = isset($sidebar_search) ? (string) $sidebar_search : '';
$sidebar_proposals = !empty($sidebar_proposals) ? $sidebar_proposals : array();
$sidebar_selected_proposal = !empty($sidebar_selected_proposal) ? $sidebar_selected_proposal : null;
$selected_proposal_id = !empty($selected_proposal_id) ? (int) $selected_proposal_id : 0;
$sidebar_base_path = !empty($sidebar_base_path) ? $sidebar_base_path : base_url('admin/proposals/index/proposals_history/');
$sidebar_page_url = !empty($sidebar_page_url) ? $sidebar_page_url : base_url('admin/proposals/index/proposals_history/' . $selected_proposal_id);

$sidebar_query_args = array();
if ($sidebar_search !== '') {
    $sidebar_query_args['q'] = $sidebar_search;
}
if ($sidebar_page > 1) {
    $sidebar_query_args['page'] = $sidebar_page;
}

$sidebar_query_suffix = !empty($sidebar_query_args) ? '?' . http_build_query($sidebar_query_args) : '';
$render_sidebar_proposal_card = function ($proposal_row) use ($sidebar_base_path, $sidebar_query_suffix, $selected_proposal_id) {
    if (empty($proposal_row)) {
        return;
    }

    $is_selected = !empty($selected_proposal_id) && (int) $proposal_row->proposals_id === $selected_proposal_id;
    $proposal_url = $sidebar_base_path . (int) $proposal_row->proposals_id;
    if (!empty($sidebar_query_suffix)) {
        $proposal_url .= $sidebar_query_suffix;
    }
    ?>
    <a href="<?= $proposal_url ?>"
       class="block border-b border-slate-200 px-4 py-4 transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800/60 <?= $is_selected ? 'bg-blue-50/70 dark:bg-slate-800/80' : 'bg-white dark:bg-slate-900' ?>">
        <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                    <div class="truncate text-sm font-semibold text-slate-900 dark:text-white">
                        <?= html_escape(!empty($proposal_row->client_name) ? $proposal_row->client_name : '-') ?>
                    </div>
                    <?php if (!empty($proposal_row->is_overdue)) { ?>
                        <span class="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">
                            <?= html_escape($proposal_row->overdue_label) ?>
                        </span>
                    <?php } ?>
                </div>
                <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                    <span class="font-medium text-slate-600 dark:text-slate-300"><?= html_escape($proposal_row->reference_no) ?></span>
                    <span class="text-slate-300 dark:text-slate-600">•</span>
                    <span><?= display_date($proposal_row->proposal_date) ?></span>
                </div>
                <div class="mt-1 text-[11px] text-slate-400 dark:text-slate-500">
                    <?= display_date($proposal_row->due_date) ?>
                </div>
            </div>
            <div class="shrink-0 text-right">
                <div class="text-sm font-bold text-slate-900 dark:text-white">
                    <?= display_money($proposal_row->total_amount, $proposal_row->currency_symbol) ?>
                </div>
                <div class="mt-2 inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide <?= html_escape($proposal_row->status_badge) ?>">
                    <?= html_escape($proposal_row->status_label) ?>
                </div>
            </div>
        </div>
    </a>
    <?php
};
?>

<style>
    [data-proposal-sidebar] .proposal-sidebar-scroll::-webkit-scrollbar {
        width: 8px;
    }
    [data-proposal-sidebar] .proposal-sidebar-scroll::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.08);
        border-radius: 999px;
    }
    [data-proposal-sidebar] .proposal-sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.5);
        border-radius: 999px;
    }
    [data-proposal-sidebar] .proposal-sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.7);
    }
</style>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900"
     data-proposal-sidebar>
    <div class="border-b border-slate-200 px-4 py-4 dark:border-slate-700">
        <div class="flex items-start justify-between gap-3">
            <div>
                <h3 class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">
                    <?= lang('all_proposals') ?>
                </h3>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                    <?= $sidebar_total ?> <?= strtolower(lang('proposal')) ?>
                </p>
            </div>
            <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                <i data-lucide="file-text" class="h-4.5 w-4.5"></i>
            </div>
        </div>
    </div>

    <div class="border-b border-slate-200 px-3 py-3 dark:border-slate-700">
        <form action="<?= $sidebar_page_url ?>" method="get" class="relative" data-proposal-sidebar-search-form>
            <span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                <i data-lucide="search" class="h-4 w-4"></i>
            </span>
            <input
                type="search"
                name="q"
                value="<?= html_escape($sidebar_search) ?>"
                placeholder="<?= lang('search') ?> <?= strtolower(lang('proposal')) ?>..."
                class="w-full rounded-xl border border-slate-300 bg-slate-50 py-3 pl-11 pr-4 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-primary focus:bg-white focus:ring-2 focus:ring-primary/20 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:focus:bg-slate-900"
            >
            <?php if ($sidebar_page > 1) { ?>
                <input type="hidden" name="page" value="<?= (int) $sidebar_page ?>">
            <?php } ?>
        </form>
    </div>

    <div class="proposal-sidebar-scroll overflow-y-auto" style="max-height: 28rem;">
        <div class="divide-y divide-slate-200 dark:divide-slate-700">
            <?php if (!empty($sidebar_proposals)) { ?>
                <?php foreach ($sidebar_proposals as $proposal_row) { ?>
                    <?php $render_sidebar_proposal_card($proposal_row); ?>
                <?php } ?>
            <?php } else { ?>
                <div class="px-4 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                    <div class="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
                        <i data-lucide="file-search" class="h-5 w-5"></i>
                    </div>
                    <p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('nothing_to_display') ?></p>
                    <?php if ($sidebar_search !== '') { ?>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400"><?= lang('search') ?>: <?= html_escape($sidebar_search) ?></p>
                    <?php } ?>
                </div>
            <?php } ?>
        </div>
    </div>

    <div class="border-t border-slate-200 px-4 py-3 dark:border-slate-700">
        <?php
        $prev_page = $sidebar_page > 1 ? $sidebar_page - 1 : null;
        $next_page = $sidebar_page < $sidebar_pages ? $sidebar_page + 1 : null;
        $page_query = array();
        if ($sidebar_search !== '') {
            $page_query['q'] = $sidebar_search;
        }
        ?>
        <div class="flex items-center justify-between gap-3">
            <?php if (!empty($prev_page)) { ?>
                <a href="<?= $sidebar_page_url . '?' . http_build_query(array_merge($page_query, array('page' => $prev_page))) ?>" 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 dark:hover:bg-slate-600">
                    <i data-lucide="chevron-left" class="h-4 w-4"></i>
                    <span>Prev</span>
                </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">
                    <i data-lucide="chevron-left" class="h-4 w-4"></i>
                    <span>Prev</span>
                </span>
            <?php } ?>

            <div class="text-center text-sm font-medium text-slate-500 dark:text-slate-300">
                <?= $sidebar_page ?> of <?= $sidebar_pages ?>
            </div>

            <?php if (!empty($next_page)) { ?>
                <a href="<?= $sidebar_page_url . '?' . http_build_query(array_merge($page_query, array('page' => $next_page))) ?>" 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 dark:hover:bg-slate-600">
                    <span>Next</span>
                    <i data-lucide="chevron-right" class="h-4 w-4"></i>
                </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">
                    <span>Next</span>
                    <i data-lucide="chevron-right" class="h-4 w-4"></i>
                </span>
            <?php } ?>
        </div>
    </div>
</div>

<script>
    (function () {
        const sidebar = document.querySelector('[data-proposal-sidebar]');
        if (!sidebar) return;

        const form = sidebar.querySelector('[data-proposal-sidebar-search-form]');
        const input = form ? form.querySelector('input[name="q"]') : null;
        const pageInput = form ? form.querySelector('input[name="page"]') : null;
        if (!form || !input) return;

        let searchTimer = null;
        function submitSearch() {
            if (pageInput) {
                pageInput.value = '1';
            }
            form.submit();
        }

        input.addEventListener('input', function () {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(submitSearch, 350);
        });

        form.addEventListener('submit', function () {
            if (pageInput && !pageInput.value) {
                pageInput.value = '1';
            }
        });
    })();
</script>
