<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    <div class="lg:col-span-4 space-y-4">
        <div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
            <div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
                <?= lang('search') ?>
            </div>
            <?php $this->load->view("admin/kb/search_box"); ?>
        </div>
        <div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
            <div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
                <?= lang('categories') ?>
            </div>
            <div class="space-y-1">
                <?php
                if (!empty($all_kb_category)) {
                    foreach ($all_kb_category as $kb_category) {
                        if (!empty($articles_info->kb_category_id)) {
                            $category_id = $articles_info->kb_category_id;
                        } else {
                            $category_id = $this->uri->segment(5);
                        }
                        $total_kb = count(array($this->db->where(array('kb_category_id' => $kb_category->kb_category_id, 'status' => 1))->get('tbl_knowledgebase')->result()));
                        $is_active = (!empty($category_id) && $category_id == $kb_category->kb_category_id);
                        ?>
                        <a href="<?= base_url('admin/knowledgebase/details/kb_category/' . $kb_category->kb_category_id) ?>"
                           class="flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors <?= $is_active ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-200' : 'text-foreground hover:bg-muted dark:hover:bg-slate-800/70' ?>">
                            <span class="font-medium"><?= $kb_category->category ?></span>
                            <span class="text-xs text-muted-foreground"><?= (!empty($total_kb) && $total_kb != 0 ? $total_kb : '') ?></span>
                        </a>
                    <?php }
                } ?>
            </div>
        </div>
    </div>

    <div class="lg:col-span-8">
        <div class="rounded-2xl border border-border bg-card shadow-sm">
            <div class="border-b border-border px-5 py-4">
                <div class="text-lg font-semibold text-foreground">
                    <?php
                    $category = $this->uri->segment(4);
                    if ($category == 'kb_category') {
                        $category_info = get_row('tbl_kb_category', array('kb_category_id' => $category_id, 'status' => 1));
                        echo $category_info->category;
                        echo '<p class="mt-1 text-sm text-muted-foreground">' . $category_info->description . '</p>';
                    } else {
                        if (!empty($articles_info)) {
                            echo $articles_info->title;
                        }
                    } ?>
                </div>
            </div>
            <div class="p-5 space-y-4" id="kb-accordion">
                <?php
                if (!empty($articles_by_category)) {
                    foreach ($articles_by_category as $key => $by_category) {
                        $accordion_id = 'kb-article-' . (!empty($by_category->kb_id) ? $by_category->kb_id : $key);
                        ?>
                        <div class="rounded-xl border border-border overflow-hidden">
                            <div class="px-4 py-3">
                                <button type="button"
                                   data-accordion-trigger
                                   data-accordion-target="#<?= $accordion_id ?>"
                                   aria-expanded="false"
                                   aria-controls="<?= $accordion_id ?>"
                                   class="flex w-full items-center justify-between gap-3 text-left text-sm font-semibold text-foreground">
                                    <span class="flex items-center gap-2">
                                        <i data-lucide="chevron-right" class="h-4 w-4 text-muted-foreground transition-transform duration-200" data-accordion-icon></i>
                                    <?php echo $by_category->title; ?>
                                    </span>
                                    <span class="text-xs font-medium text-muted-foreground"><?= lang('view') ?></span>
                                </button>
                            </div>
                            <div id="<?= $accordion_id ?>" class="hidden" data-accordion-panel>
                                <div class="border-t border-border px-4 py-4 text-sm text-muted-foreground">
                                    <?php
                                    $attachments = null;
                                    $uploaded_file = json_decode($by_category->attachments);
                                    if (!empty($uploaded_file)) {
                                        $attachments = true;
                                    }
                                    echo read_more($by_category->description, 500, 'admin/knowledgebase/details/articles/' . $by_category->kb_id, $attachments);
                                    ?>
                                </div>
                            </div>
                        </div>
                    <?php }
                } else {
                    if (!empty($articles_info)) {
                        echo html_entity_decode($articles_info->description);
                        $uploaded_file = json_decode($articles_info->attachments);
                        if (!empty($uploaded_file)):
                            ?>
                            <div class="pt-4">
                                <h4 class="text-sm font-semibold text-foreground mb-3"><?= lang('attachment') ?></h4>
                                <ul class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <?php foreach ($uploaded_file as $fKey => $v_files): ?>
                                        <?php if (!empty($v_files)): ?>
                                            <li class="rounded-lg border border-border bg-muted/40 p-3">
                                                <div class="flex items-center gap-3">
                                                    <div class="h-10 w-10 rounded-lg bg-card flex items-center justify-center border border-border">
                                                        <?php if ($v_files->is_image == 1) : ?>
                                                            <img src="<?= base_url() . $v_files->path ?>" alt="Attachment" class="h-9 w-9 rounded-md object-cover">
                                                        <?php else : ?>
                                                            <i class="-o text-muted-foreground" data-lucide="file-text"></i>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="flex-1">
                                                        <a href="<?= base_url() ?>admin/knowledgebase/download/<?= $articles_info->kb_id . '/' . $fKey ?>"
                                                           class="text-sm font-semibold text-foreground">
                                                            <?= $v_files->fileName ?>
                                                        </a>
                                                        <p class="text-xs text-muted-foreground"><?= $v_files->size ?> <?= lang('kb') ?></p>
                                                    </div>
                                                    <a href="<?= base_url() ?>admin/knowledgebase/download/<?= $articles_info->kb_id . '/' . $fKey ?>"
                                                       class="inline-flex items-center justify-center rounded-lg border border-border bg-card p-2 text-muted-foreground hover:text-foreground">
                                                        <i data-lucide="download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endif;
                    }
                } ?>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {
        var root = document.getElementById('kb-accordion');
        if (!root) {
            return;
        }

        root.addEventListener('click', function (event) {
            var trigger = event.target.closest('[data-accordion-trigger]');
            if (!trigger) {
                return;
            }

            var targetSelector = trigger.getAttribute('data-accordion-target');
            var panel = targetSelector ? root.querySelector(targetSelector) : null;
            if (!panel) {
                return;
            }

            var isOpen = !panel.classList.contains('hidden');

            root.querySelectorAll('[data-accordion-panel]').forEach(function (item) {
                item.classList.add('hidden');
            });

            root.querySelectorAll('[data-accordion-trigger]').forEach(function (item) {
                item.setAttribute('aria-expanded', 'false');
            });

            root.querySelectorAll('[data-accordion-icon]').forEach(function (icon) {
                icon.classList.remove('rotate-90');
            });

            if (!isOpen) {
                panel.classList.remove('hidden');
                trigger.setAttribute('aria-expanded', 'true');
                var icon = trigger.querySelector('[data-accordion-icon]');
                if (icon) {
                    icon.classList.add('rotate-90');
                }
            }
        });
    })();
</script>
