llhd/Views/WebNew/Shared/Section/_Header.cshtml

@{
    var currentController = ViewContext.RouteData.Values["Controller"]?.ToString();
    var currentAction = ViewContext.RouteData.Values["Action"]?.ToString();
}

<header>
    <nav class="navbar navbar-expand-lg navbar-light sticky-top bg-white shadow-sm">
        <div class="container">

            <a class="navbar-brand" asp-controller="Home" asp-action="Index">
                <img src="~/webnew/assets/image/logo/Logo update.png" width="120" />
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbarNav">

                <ul class="navbar-nav align-items-lg-center gap-lg-3 mx-auto">

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentController == "Home" && currentAction == "Index" ? "active" : "")"
                           asp-controller="Home" asp-action="Index">
                            Beranda
                        </a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link nav-underline @(currentController == "Layanan" ? "active" : "")"
                           asp-controller="Layanan" asp-action="Index">
                            Layanan
                        </a>

                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/Layanan?jenis=pcu">PCU Air</a></li>
                            <li><a class="dropdown-item" href="/Layanan?jenis=air">Pengujian Air</a></li>
                            <li><a class="dropdown-item" href="/Layanan?jenis=udara">Pengujian Udara</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentController == "Regulasi" ? "active" : "")"
                           asp-controller="Regulasi" asp-action="Index">
                            Regulasi
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentAction == "Sertifikat" ? "active" : "")"
                           asp-controller="Home" asp-action="Sertifikat">
                            Sertifikat
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentAction == "TentangKami" ? "active" : "")"
                           asp-controller="Home" asp-action="TentangKami">
                            Tentang Kami
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentAction == "Kontak" ? "active" : "")"
                           asp-controller="Home" asp-action="Kontak">
                            Kontak
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline @(currentAction == "Faq" ? "active" : "")"
                           asp-controller="Home" asp-action="Faq">
                            FAQ
                        </a>
                    </li>

                    <li>
                        <button class="btn btn-link search-btn" data-bs-toggle="modal" data-bs-target="#searchModal">
                            <i class="bi bi-search"></i>
                        </button>
                    </li>

                </ul>

                <div class="d-flex">
                    <a href="https://akun.dinaslhdki.id/Identity/Account/Login"
                       class="btn btn-primary rounded-pill px-4">
                        Login
                    </a>
                </div>

            </div>

        </div>
    </nav>
</header>

<div class="modal fade" id="searchModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content search-modal">

            <div class="modal-body">

                <input type="text" id="searchInput"
                       class="form-control search-popup-input"
                       placeholder="Cari layanan, berita, regulasi..." />

                <div id="searchResult" class="mt-3"></div>

            </div>

        </div>
    </div>
</div>

<script>
    let allData = [];

    async function loadSearchData() {
        const regulasi = await fetch('/WebNew/Regulasi/GetRegulasi').then(r => r.json());
        const berita = await fetch('/WebNew/Berita/GetAll').then(r => r.json());

        allData = [
            ...regulasi.map(x => ({ ...x, type: 'regulasi' })),
            ...berita.map(x => ({ ...x, type: 'berita' })),
        ];
    }

    function searchData(keyword) {

        keyword = keyword.toLowerCase();

        const result = allData.filter(item =>
            item.judul.toLowerCase().includes(keyword)
        );

        renderResult(result);
    }

    function renderResult(data) {

        let html = "";

        if (data.length === 0) {
            html = "<p class='text-muted'>Tidak ditemukan</p>";
        }

        data.slice(0, 5).forEach(item => {

            let link = "#";

            if (item.type === "berita") {
                link = `/WebNew/Berita/Detail?id=${item.id}`;
            }

            if (item.type === "regulasi") {
                link = item.file;
            }

            html += `
            <a href="${link}" class="search-item d-block mb-2 rounded p-2">
                <strong>${item.judul}</strong><br>
                <small class="text-muted">${item.type}</small>
            </a>
        `;
        });

        document.getElementById("searchResult").innerHTML = html;
    }

    document.addEventListener("DOMContentLoaded", () => {

        loadSearchData();

        document.getElementById("searchInput").addEventListener("keyup", function () {
            const keyword = this.value;

            if (keyword.length < 2) {
                document.getElementById("searchResult").innerHTML = "";
                return;
            }

            searchData(keyword);
        });

    });
</script>