@{
    ViewData["Title"] = "Settings";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div class="container">
    <div class="row justify-content-center">
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
                    <div class="box bg-success text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-currency-usd"></i>
                        </h1>
                        <h6 class="text-white">Salary</h6>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
                    <div class="box bg-purple text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-calendar"></i>
                        </h1>
                        <h6 class="text-white">Calendar</h6>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="HrUserSetting">
                    <div class="box bg-megna text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-account-settings"></i>
                        </h1>
                        <h6 class="text-white">User Setting</h6>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div id="app" class="card m-1">
        <div class="row">
            <div class="container updateDate justify-content-center align-items-center p-4 shadow">
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header" style="background-color: white;">
                                    <h3 class="date-heading text-center">LATEST UPDATE DATES</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header text-center" style="background-color: white;">
                                    <label class="date-heading text-center">Salary Latest Update: {{ rateUpdateDate || 'N/A' }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header text-center" style="background-color: white;">
                                    <label class="date-heading text-center">Calendar Latest Update: {{ calendarUpdateDate || 'N/A' }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header text-center" style="background-color: white;">
                                    <label class="date-heading text-center">Flexi Hour Latest Update: {{ flexiHourUpdateDate || 'N/A' }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header text-center" style="background-color: white;">
                                    <label class="date-heading text-center">Region Latest Update: {{ regionUpdateDate || 'N/A' }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card-header text-center" style="background-color: white;">
                                    <label class="date-heading text-center">Staff Approval Flow Latest Update: {{ approvalFlowUpdateDate || 'N/A' }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
    <script>
        window.onload = function () {
            const app = Vue.createApp({
                data() {
                    return {
                        rateUpdateDate: null,
                        calendarUpdateDate: null,
                        flexiHourUpdateDate: null,
                        regionUpdateDate: null,
                        approvalFlowUpdateDate: null,
                    };
                },
                mounted() {
                    this.fetchUpdateDates();
                    this.checkIncompleteSettings(); 
                },
                methods: {
                    async fetchUpdateDates() {
                        try {
                            const response = await fetch("/OvertimeAPI/GetUpdateDates", {
                                method: "GET",
                                headers: { "Content-Type": "application/json" },
                            });
                            if (!response.ok) throw new Error("Failed to fetch update dates");
                            const data = await response.json();
                            this.rateUpdateDate = data.rateUpdateDate;
                            this.calendarUpdateDate = data.calendarUpdateDate;
                            this.flexiHourUpdateDate = data.flexiHourUpdateDate;
                            this.regionUpdateDate = data.regionUpdateDate;
                            this.approvalFlowUpdateDate = data.approvalFlowUpdateDate;
                        } catch (error) {
                            console.error("Error fetching update dates:", error);
                        }
                    },
                    async checkIncompleteSettings() {
                        try {
                            const response = await fetch("/OvertimeAPI/CheckIncompleteUserSettings", {
                                method: "GET",
                                headers: { "Content-Type": "application/json" },
                            });
                            if (!response.ok) throw new Error("Failed to check incomplete user settings");
                            const data = await response.json();

                            if (data.hasIncompleteSettings) {
                                const numberOfStaff = data.numberOfIncompleteUsers;
                                let alertMessage = `Action Required!\n\nThere are ${numberOfStaff} staff with incomplete Rate / Flexi Hour / Approval Flow / State.`;
                                alert(alertMessage);
                            }
                        } catch (error) {
                            console.error("Error checking incomplete settings:", error);
                            alert("An error occurred while checking for incomplete user settings.");
                        }
                    }
                },
            }).mount("#app");
        };
    </script>
}