@using ConstructorAppUI.ViewModels
@model UserProfileViewModel

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>

<div class="wrapper">
    <script>
        $(document).ready(() => {
            var signalRHubBaseUrl = '@ViewBag.SignalRHubBaseUrl';
            if (!signalRHubBaseUrl) {
                console.error("SignalRHubBaseUrl tanımlı değil!");
                return;
            }

            var connection = new signalR.HubConnectionBuilder().withUrl(`${signalRHubBaseUrl}/SignalRHub`).build();

            connection.start()
                .then(() => {
                    $("#connstatus").text("Bağlı");
                    document.getElementById("connstatus").className = "badge bg-success text-white";
                    var iconElement = document.querySelector("#navbarDropdown1 i");
                    if (iconElement) {
                        iconElement.className = "fas fa-wifi text-success";
                    }

                    setInterval(() => {
                        connection.invoke("SendContactUs");
                    }, 1000);
                })
                .catch((err) => {
                    console.error("SignalR bağlantısı sırasında hata:", err);
                });

            connection.onclose(() => {
                $("#connstatus").text("Bağlı Değil");
                document.getElementById("connstatus").className = "badge bg-danger text-white";
                var iconElement = document.querySelector("#navbarDropdown1 i");
                if (iconElement) {
                    iconElement.className = "fas fa-wifi text-danger";
                }

                setTimeout(() => connection.start().catch(console.error), 5000);
            });

            connection.onreconnecting(() => {
                $("#connstatus").text("Yeniden Bağlanıyor...");
                document.getElementById("connstatus").className = "badge bg-warning text-white";
            });

            connection.onreconnected(() => {
                $("#connstatus").text("Bağlı");
                document.getElementById("connstatus").className = "badge bg-success text-white";
                var iconElement = document.querySelector("#navbarDropdown1 i");
                if (iconElement) {
                    iconElement.className = "fas fa-wifi text-success";
                }
            });

            connection.on("ReceiveContactUsCountByStatusPending", (value) => {
                console.log(value);
                if (value > 0) {
                    $("#contactuscount").text(value);
                } else {
                    $("#contactuscount").text('');
                }
            });


        });
    </script>

    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                    <i class="fas fa-search"></i>
                </a>
                <div class="navbar-search-block">
                    <form class="form-inline">
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-navbar" id="searchInput" type="search" placeholder="Arama.." aria-label="Search">
                            <div class="input-group-append">
                                <button id="searchButton" class="btn btn-navbar" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>
        </ul>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">
                    <i class="fas fa-wifi" title="Sistem Durumu"></i>
                    <span class="badge badge-warning navbar-badge" id="connstatus"></span>
                </a>
            </li>


            <li class="nav-item dropdown hidden-caret">
                <a class="nav-link" href="/ContactUs/Index" id="navbarDropdown1" role="button">
                    <i class="far fa-envelope" title="İletişim Formu"></i>
                    <span class="badge badge-danger navbar-badge" id="contactuscount"></span>
                </a>
            </li>

            <li class="nav-item dropdown">
                <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                    <img src="~/SeedData/defaultuser.png" width="36" class="img-circle"><span style="color: black;">@Model.UserName</span>

                </a>
                <ul class="dropdown-menu dropdown-user">
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="javascript:void(0);" onclick="window.location.href='/UserProfile/Index/'">
                        <i class="la la-cog"></i> Ayarlar
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="javascript:void(0);" onclick="window.location.href='/Login/LogOut/'">
                        <i class="la la-close"></i> Çıkış
                    </a>
                </ul>
            </li>


        </ul>
    </nav>
</div>

<script>
    // Vurguları temizlemek için fonksiyon
    function clearHighlights() {
        document.querySelectorAll("span[style='background-color: yellow;']").forEach(function (span) {
            span.outerHTML = span.innerHTML; // Sadece span'ı kaldır ve içeriği olduğu gibi bırak
        });
    }

    // Arama işlemini gerçekleştiren fonksiyon
    function performSearch() {
        var searchQuery = document.getElementById("searchInput").value.toLowerCase();
        if (!searchQuery) return;  // Arama kutusu boşsa bir şey yapma

        // Vurguları temizle
        clearHighlights();

        // Sayfadaki hedef alanları belirle (örneğin yalnızca `.content` içindeki metinleri kontrol etmek isterseniz)
        var elements = document.querySelectorAll("body *:not(script):not(style):not(input):not(button)");

        elements.forEach(function (el) {
            // Elementin içeriğini kontrol et
            if (el.children.length === 0) { // Sadece metin düğümleri içeren elemanları işlemek
                var text = el.textContent;

                if (text.toLowerCase().includes(searchQuery)) {
                    // Aranan kelimeyi <span> ile sarmala ve vurgula
                    var highlightedText = text.replace(
                        new RegExp(`(${searchQuery})`, 'gi'),
                        `<span style="background-color: yellow;">$1</span>`
                    );
                    el.innerHTML = highlightedText;
                }
            }
        });
    }

    // Arama kutusu her değiştiğinde (yazıldıkça) arama yap
    document.getElementById("searchInput").addEventListener("input", function () {
        performSearch();  // Her input değişikliğinde arama yap
    });

    // Arama kutusu temizlendiğinde (boşaltıldığında) vurguları temizle
    document.getElementById("searchInput").addEventListener("input", function () {
        if (this.value === "") {
            clearHighlights();  // Arama kutusu boşsa vurguları temizle
        }
    });
</script>