
<?php
echo '<style>
	.kb-search-wrap,
	.kb-search-wrap .awesomplete,
	.kb-search-wrap #kb-search {
		width: 100% !important;
		max-width: 100%;
	}
	.kb-search-wrap .awesomplete {
		display: block;
		position: relative;
	}
	.kb-search-wrap .awesomplete > ul {
		margin-top: 0.45rem;
		border: 1px solid rgb(226 232 240);
		border-radius: 0.9rem;
		background: rgb(255 255 255);
		box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
		padding: 0.35rem 0;
		color: rgb(15 23 42);
		overflow: hidden;
		z-index: 40;
	}
	.kb-search-wrap .awesomplete > ul:before {
		display: none;
	}
	.kb-search-wrap .awesomplete > ul > li {
		padding: 0.2rem 0.95rem;
		font-size: 0.875rem;
		line-height: 1.35rem;
		color: rgb(15 23 42);
		border: 0;
	}
	.kb-search-wrap .awesomplete > ul > li[aria-selected="true"],
	.kb-search-wrap .awesomplete > ul > li:hover {
		background: rgb(239 246 255);
		color: rgb(30 64 175);
	}
	.dark .kb-search-wrap .awesomplete > ul {
		border-color: rgb(51 65 85);
		background: rgb(15 23 42);
		box-shadow: 0 20px 44px -28px rgba(2, 6, 23, 0.85);
		color: rgb(241 245 249);
	}
	.dark .kb-search-wrap .awesomplete > ul > li {
		color: rgb(226 232 240);
	}
	.dark .kb-search-wrap .awesomplete > ul > li[aria-selected="true"],
	.dark .kb-search-wrap .awesomplete > ul > li:hover {
		background: rgb(30 41 59);
		color: rgb(125 211 252);
	}
</style>';
echo '<div class="relative w-full kb-search-wrap">';
echo '<i data-lucide="search" class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground z-20"></i>';
echo form_input(array(
    "id" => "kb-search",
    "name" => "search",
    "value" => "",
    "autocomplete" => "false",
    "class" => "w-full rounded-xl border border-border bg-background pl-10 pr-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-indigo-500/40",
    "placeholder" => lang('search_your_question')
));
echo '</div>';
?>

<script type="text/javascript">
    $(document).ready(function () {
        var $searchBox = $("#kb-search");

        function loadAsset(type, url, onload) {
            var el = document.createElement(type);
            if (type === "link") {
                el.rel = "stylesheet";
                el.href = url;
            } else {
                el.src = url;
                el.async = true;
            }
            el.onload = onload || null;
            document.head.appendChild(el);
        }

        function ensureAwesomplete(done) {
            if (window.Awesomplete) {
                done();
                return;
            }
            loadAsset("link", "https://cdn.jsdelivr.net/npm/awesomplete@1.1.5/awesomplete.min.css");
            loadAsset("script", "https://cdn.jsdelivr.net/npm/awesomplete@1.1.5/awesomplete.min.js", function () {
                if (window.Awesomplete) {
                    done();
                }
            });
        }

        function initAwesomplete() {
            if (!window.Awesomplete || !$searchBox.length) {
                return;
            }

            var awesomplete = new Awesomplete($searchBox[0], {
                minChars: 1,
                autoFirst: true,
                maxItems: 10
            });

            $searchBox.on("keyup", function (e) {
                if (!(e.which >= 37 && e.which <= 40)) {

                    //show/hide loder icon in searchbox
                    if (this.value) {
                        $searchBox.addClass("searching");
                    } else {
                        $searchBox.removeClass("searching");
                    }
                    //witi 200 ms to request ajax cll
                    clearTimeout($.data(this, 'timer'));
                    var wait = setTimeout(getAwesompleteList, 200);
                    $(this).data('timer', wait);
                }

                //hide the no result found message
                if (!this.value) {
                    $(".awesomplete").find("ul").html("").attr("hidden");
                }

            });

            function getAwesompleteList() {

                $.ajax({
                    url: "<?php echo base_url('admin/knowledgebase/get_article_suggestion/'); ?>",
                    data: {search: $searchBox.val()},
                    cache: false,
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        //show a loader icon in search box
                        $searchBox.removeClass("searching");

                        //set the results
                        awesomplete.list = response;

                        //show no result found 
                        if (!response.length && $searchBox.val()) {
                            $(".awesomplete").find("ul").html("<li aria-selected='false'> <?php echo lang('no_result_found'); ?> </li>").removeAttr("hidden");
                        }
                    }
                });
            }

            $searchBox.on('awesomplete-selectcomplete', function () {
                //serch result selected, redirect to the article view
                if (this.value) {
                    window.location.href = "<?php echo base_url('admin/knowledgebase/details/articles'); ?>/" + this.value;
                }
                this.value = "";
            });
        }

        ensureAwesomplete(initAwesomplete);
    });

</script>
