@model ConfigurationModel

@{
    Layout = "_ConfigurePlugin";
    NopHtml.SetActiveMenuItemSystemName("API plugins");    
}

<form asp-controller="SignalRApiAdmin" asp-action="Configure" method="post" id="configuration-form">
    <div class="cards-group">
        <div class="card card-default no-margin">

            <div class="card-header">
                TITLE comes here
            </div>

            <div class="card-body">
                <div class="form-group row">
                    <div class="col-md-3">
                        <div class="label-wrapper">
                            <label class="col-form-label">
                                Connection Status
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-text-row" id="connection-status">@Model.Test</div>
                    </div>
                </div>

                <!-- New button to call TestHub method -->
                <!--nop-antiforgery-token /-->
                <div class="form-group row">
                    <div class="col-md-3 offset-md-3">
                        <button type="button" class="btn btn-primary" id="test-hub-button">Test Hub Connection</button>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-9 offset-md-3">
                        <button type="submit" name="credentials" class="btn btn-primary">@T("Admin.Common.Save")</button>
                    </div>
                </div>

                <!-- Result display area -->
                <div class="form-group row">
                    <div class="col-md-3 offset-md-3">
                        <div id="test-hub-result"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    document.getElementById("test-hub-button").addEventListener("click", function () {
        // Clear previous result
        document.getElementById("test-hub-result").innerText = "Testing connection...";

        var postData = {
            message: 'hello'
        };
        addAntiForgeryToken(postData);
        $.ajax({
            cache: false,
            type: 'POST',            
            url: '@Url.Action("TestHubConnection", "SignalRApi")',
            data: postData,
            traditional: true,
            success: function (data, textStatus, jqXHR) {
                if (data.message) {
                    document.getElementById("test-hub-result").innerText = data.message;
                } else {
                    //display errors if returned
                    document.getElementById("test-hub-result").innerText = data.message;
                    display_nop_error(data);
                }
            },
            complete: function (jqXHR, textStatus) {
                console.log('Complete');
            }
        });




        // // Send AJAX request to TestHubConnection action
        // fetch('@Url.Action("TestHubConnection", "SignalRApi")', {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json',
        //         'RequestVerificationToken': 'addAntiForgeryToken(postData);'
        //     }
        // })
        //     .then(response => response.json())
        //     .then(data => {
        //         // Update the result based on response
        //         if (data.success) {
        //             document.getElementById("test-hub-result").innerText = data.message;
        //         } else {
        //             document.getElementById("test-hub-result").innerText = data.message;
        //         }
        //     })
        //     .catch(error => {
        //         document.getElementById("test-hub-result").innerText = "Error: " + error;
        //     });
    });
</script>