PSTW_CentralizeSystem/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml

@{
    ViewData["Title"] = "Rate Update";
    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">Rate</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>
</div>

<div id="app" class="row">
    <div class="card m-1">
        <form v-on:submit.prevent="updateRates" data-aos="fade-right">
            <div class="card-header bg-white text-center">
                <h3 class="rate-heading">UPDATE RATE</h3>
            </div>
            @* Enter Rate *@
            <div class="d-flex justify-content-center align-items-center">
                <div class="d-flex align-items-center gap-2">
                    <label for="rate" class="mb-0">Rate</label>
                    <input type="number" id="rate" class="form-control text-center" v-model="rate" placeholder="Enter new rate" step="0.01">
                    <button type="button" class="btn btn-danger me-2" v-on:click="clearForm">Clear</button>
                    <button type="submit" class="btn btn-success col-4">Update Rates</button>
                </div>
            </div>
            <div class="card-body">
                <table id="rateDatatable" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Department</th>
                            <th>Current Rate</th>
                            <th class="text-center">Select Rate</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="d-flex align-items-center justify-content-end gap-2 my-3">
                <button type="button" class="btn btn-danger" v-on:click="clearForm">Clear</button>
                <button type="submit" class="btn btn-success">Update Rates</button>
            </div>

        </form>
    </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 {
                        users: [],
                        selectedRates: [],
                        userList: [],
                        rate: null,
                        rateDatatable: null
                    };
                },
                mounted() {
                    console.log("Vue App Mounted Successfully");
                    this.fetchUser().then(() => {
                        this.fetchRates();
                    });
                },
                methods: {
                    async fetchRates() {
                        try {
                            const response = await fetch("/OvertimeAPI/GetUserRates", { method: "POST", headers: { "Content-Type": "application/json" }});
                            if (!response.ok) throw new Error("Failed to fetch rates");
                            const usersWithRates = await response.json();
                            this.userList = this.userList.map(user => {
                                const userRate = usersWithRates.find(rate => rate.userId === user.id);
                                return { ...user, rateValue: userRate ? userRate.rateValue : null };
                            });
                            this.initiateTable();
                        } catch (error) {
                            console.error("Error fetching rates:", error);
                        }
                    },
                    async updateRates() {
                        try {
                            if (this.selectedRates.length === 0) {
                                alert("Please select at least one user.");
                                return;
                            }
                            let rateValue = parseFloat(this.rate);
                            if (isNaN(rateValue)) {
                                alert("Please enter a valid rate.");
                                return;
                            }
                            const payload = this.selectedRates.map(userId => ({ UserId: userId, RateValue: rateValue.toFixed(2) }));
                            const response = await fetch("/OvertimeAPI/UpdateRates", {
                                method: "POST",
                                headers: { "Content-Type": "application/json" },
                                body: JSON.stringify(payload)
                            });
                            if (response.ok) {
                                alert("Rates updated successfully!");
                                this.selectedRates = [];
                                this.rate = null;
                                await this.fetchRates();
                            } else {
                                alert("Failed to update rates. Please try again.");
                            }
                        } catch (error) {
                            console.error("Error updating rates:", error);
                            alert("An error occurred while updating rates.");
                        }
                    },
                    async fetchUser() {
                        try {
                            const response = await fetch(`/InvMainAPI/UserList/`, { method: 'POST' });
                            if (response.ok) {
                                const data = await response.json();
                                this.userList = data.filter(e => e.fullName !== "MAAdmin" && e.fullName !== "SysAdmin");
                                console.log(this.userList);
                            } else {
                                console.error(`Failed to fetch user: ${response.statusText}`);
                            }
                        } catch (error) {
                            console.error('There was a problem with the fetch operation:', error);
                        }
                    },
                    initiateTable() {
                        let self = this;
                        if ($.fn.dataTable.isDataTable('#rateDatatable')) {
                            $('#rateDatatable').DataTable().clear().destroy();
                        }
                        this.rateDatatable = $('#rateDatatable').DataTable({
                            "data": this.userList,
                            "columns": [
                                { 
                                    "title": "Full Name", 
                                    "data": "fullName" 
                                },
                                { 
                                    "title": "Department", 
                                    "data": "departmentName" 
                                },
                                { 
                                    "title": "Current Rate", 
                                    "data": "rateValue", 
                                    "render": data => data ? parseFloat(data).toFixed(2) : 'N/A' 
                                },
                                { 
                                    "title": "Select Rate", 
                                    "data": "id",
                                    "className": "text-center",
                                    "render": function (data) 
                                    {
                                    return `<input type='checkbox' class='rate-checkbox' value='${data}'>`;
                                }}
                            ],
                            responsive: true,
                        });
                        $('#rateDatatable tbody').on('change', '.rate-checkbox', function () {
                            const userId = $(this).val();
                            if (this.checked) self.selectedRates.push(userId);
                            else self.selectedRates = self.selectedRates.filter(id => id !== userId);
                        });
                    },
                    clearForm() {
                        this.rate = null;
                        this.selectedRates = [];

                        document.querySelectorAll('.rate-checkbox').forEach(checkbox => {
                            checkbox.checked = false;
                        });
                    }

                }
            });
            app.mount('#app');
        };
    </script>
}