@{
    ViewData["Title"] = "Edit Overtime";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers


<div id="app" class="container mt-4 d-flex justify-content-center">
    <div class="card shadow-sm" style="width: 1100px;">
        <div class="card-body">
            <div class="row">
                <div class="col-md-7">
                    <div class="mb-3">
                        <label class="form-label" for="dateInput">Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" v-model="editForm.otDate" v-on:input="handleDateChange" required>
                        <small class="text-danger" v-if="validationErrors.otDate">{{ validationErrors.otDate }}</small>
                    </div>

                    <h6 class="fw-bold">OFFICE HOURS</h6>
                    <div class="d-flex gap-3 mb-1 align-items-end flex-wrap">
                        <div style="flex: 1;">
                            <label for="officeFrom">From</label>
                            <input type="time" id="officeFrom" class="form-control" v-model="editForm.officeFrom"
                                   v-on:change="updateTime('officeFrom')" :disabled="isOfficeHoursDisabled">
                        </div>
                        <div style="flex: 1;">
                            <label for="officeTo">To</label>
                            <input type="time" id="officeTo" class="form-control" v-model="editForm.officeTo"
                                   v-on:change="updateTime('officeTo')" :disabled="isOfficeHoursDisabled">
                        </div>
                        <div style="flex: 1;">
                            <label for="officeBreak">Break Hours (Minutes)</label>
                            <div class="d-flex">
                                <select id="officeBreak" class="form-control" v-model.number="editForm.officeBreak"
                                        v-on:change="calculateOTAndBreak" :disabled="isOfficeHoursDisabled">
                                    <option v-for="opt in breakOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                                </select>
                                <button class="btn btn-outline-danger ms-2" v-on:click="clearOfficeHours"
                                        title="Clear Office Hours" :disabled="isOfficeHoursDisabled">
                                    <i class="bi bi-x-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <small class="text-muted mb-3 d-block" v-if="flexiTimes.start && flexiTimes.end">Valid Office Hours ranges: {{ flexiTimes.start }} to {{ flexiTimes.end }}</small>


                    <h6 class="fw-bold text-danger">AFTER OFFICE HOURS</h6>
                    <div class="d-flex gap-3 mb-1 align-items-end flex-wrap">
                        <div style="flex: 1;">
                            <label for="afterFrom">From</label>
                            <input type="time" id="afterFrom" class="form-control" v-model="editForm.afterFrom" v-on:change="updateTime('afterFrom')">
                        </div>
                        <div style="flex: 1;">
                            <label for="afterTo">To</label>
                            <input type="time" id="afterTo" class="form-control" v-model="editForm.afterTo" v-on:change="updateTime('afterTo')">
                        </div>
                        <div style="flex: 1;">
                            <label for="afterBreak">Break Hours (Minutes)</label>
                            <div class="d-flex">
                                <select id="afterBreak" class="form-control" v-model.number="editForm.afterBreak" v-on:change="calculateOTAndBreak">
                                    <option v-for="opt in breakOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                                </select>
                                <button class="btn btn-outline-danger ms-2" v-on:click="clearAfterHours" title="Clear After Office Hours">
                                    <i class="bi bi-x-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <small class="text-muted mb-3 d-block" v-if="flexiTimes.start && flexiTimes.end">Valid After Office Hours ranges: 00:00 - {{ flexiTimes.start }} or {{ flexiTimes.end }} - 00:00</small>

                    <div class="mb-3" v-if="isPSTWAIR">
                        <label for="airstationDropdown">Air Station <span class="text-danger">*</span></label>
                        <select id="airstationDropdown" class="form-control select2" v-model="editForm.stationId" required>
                            <option value="" disabled selected>Select Station</option>
                            <option v-for="station in airstationList" :key="station.stationId" :value="station.stationId">
                                {{ station.stationName || 'Unnamed Station' }}
                            </option>
                        </select>
                        <small class="text-danger" v-if="validationErrors.stationId">{{ validationErrors.stationId }}</small>
                        <small class="text-muted">*Only for PSTW AIR</small>
                    </div>
                    <div class="mb-3" v-if="isPSTWMARINE">
                        <label for="marinestationDropdown">Marine Station <span class="text-danger">*</span></label>
                        <select id="marinestationDropdown" class="form-control select2" v-model="editForm.stationId" required>
                            <option value="" disabled selected>Select Station</option>
                            <option v-for="station in marinestationList" :key="station.stationId" :value="station.stationId">
                                {{ station.stationName || 'Unnamed Station' }}
                            </option>
                        </select>
                        <small class="text-danger" v-if="validationErrors.stationId">{{ validationErrors.stationId }}</small>
                        <small class="text-muted">*Only for PSTW MARINE</small>
                    </div>

                    <div class="mb-3">
                        <label for="otDescription">Work Brief Description <span class="text-danger">*</span></label>
                        <textarea id="otDescription" class="form-control" v-model="editForm.otDescription" v-on:input="limitCharCount" placeholder="Describe the work done..." required></textarea>
                        <small class="text-danger" v-if="validationErrors.otDescription">{{ validationErrors.otDescription }}</small>
                        <small class="text-muted">{{ charCount }} / 150 characters</small>
                    </div>
                </div>

                <div class="col-md-5 mt-5">
                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label for="userFlexiHourDisplay">Your Flexi Hour</label>
                        <input type="text" id="userFlexiHourDisplay" class="form-control text-center" :value="userFlexiHourDisplay" readonly style="width: 200px;">
                    </div>

                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label for="detectedDayType">Day</label>
                        <input type="text" class="form-control text-center" v-model="editForm.otDays" readonly style="width: 200px;">
                    </div>

                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label for="totalOTHours">Total OT Hours</label>
                        <input type="text" id="totalOTHours" class="form-control text-center" v-model="totalOTHours" style="width: 200px;" readonly>
                    </div>

                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label for="totalBreakHours">Total Break Hours</label>
                        <input type="text" id="totalBreakHours" class="form-control text-center" v-model="totalBreakHours" style="width: 200px;" readonly>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-danger" v-on:click="goBack">Cancel</button>
                <button class="btn btn-success ms-3" v-on:click="validateAndUpdate">Update</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    editForm: {
                        overtimeId: null,
                        otDate: "",
                        officeFrom: "",
                        officeTo: "",
                        officeBreak: 0,
                        afterFrom: "",
                        afterTo: "",
                        afterBreak: 0,
                        stationId: "",
                        otDescription: "",
                        otDays: "",
                        userId: null,
                    },
                    airstationList: [],
                    marinestationList: [],
                    totalOTHours: "0 hr 0 min",
                    totalBreakHours: "0 hr 0 min",
                    currentUser: null,
                    isPSTWAIR: false,
                    isPSTWMARINE: false,
                    userState: null,
                    publicHolidays: [],
                    userFlexiHour: null,
                    breakOptions: Array.from({ length: 15 }, (_, i) => {
                        const totalMinutes = i * 30;
                        const hours = Math.floor(totalMinutes / 60);
                        const minutes = totalMinutes % 60;

                        let label = '';
                        if (hours > 0) label += `${hours} hour${hours > 1 ? 's' : ''}`;
                        if (minutes > 0) label += `${label ? ' ' : ''}${minutes} min`;
                        if (!label) label = '0 min';

                        return { label, value: totalMinutes };
                    }),
                    previousPage: document.referrer,
                    returnMonth: null,
                    returnYear: null,
                    validationErrors: {
                        otDate: "",
                        stationId: "",
                        otDescription: "",
                        timeEntries: ""
                    }
                };
            },
            computed: {
                charCount() {
                    return this.editForm.otDescription.length;
                },
                userFlexiHourDisplay() {
                    return this.userFlexiHour ? this.userFlexiHour.flexiHour : "N/A";
                },
                isOfficeHoursDisabled() {
                    return this.editForm.otDays === "Weekday";
                },
                flexiTimes() {
                    if (!this.userFlexiHour || !this.userFlexiHour.flexiHour) {
                        return { start: 'N/A', end: 'N/A' };
                    }
                    const times = this.userFlexiHour.flexiHour.split(' - ');
                    return {
                        start: times[0],
                        end: times[1]
                    };
                }
            },
            async mounted() {
                const urlParams = new URLSearchParams(window.location.search);
                const overtimeId = urlParams.get('overtimeId');

                this.returnMonth = urlParams.get('month');
                this.returnYear = urlParams.get('year');

                if (overtimeId) {
                    await this.fetchOvertimeRecord(overtimeId);
                }

                await this.fetchUserAndRelatedData();

                const fetchStationPromises = [];
                if (this.isPSTWAIR) {
                    fetchStationPromises.push(this.fetchStations());
                }
                if (this.isPSTWMARINE) {
                    fetchStationPromises.push(this.fetchStationsMarine());
                }
                await Promise.all(fetchStationPromises);

                this.$nextTick(() => {
                    this.initializeSelect2Dropdowns();
                    if (this.editForm.stationId) {
                        if (this.isPSTWAIR) {
                            $('#airstationDropdown').val(this.editForm.stationId).trigger('change.select2');
                        }
                        if (this.isPSTWMARINE) {
                            $('#marinestationDropdown').val(this.editForm.stationId).trigger('change.select2');
                        }
                    }
                    if (this.isOfficeHoursDisabled) {
                        this.clearOfficeHours();
                    }
                });
            },
            watch: {
                'editForm.otDays'(newVal) {
                    if (newVal === "Weekday") {
                        this.clearOfficeHours();
                    }
                }
            },
            methods: {
                initializeSelect2Dropdowns() {
                    if ($('#airstationDropdown').data('select2')) {
                        $('#airstationDropdown').select2('destroy');
                    }
                    if ($('#marinestationDropdown').data('select2')) {
                        $('#marinestationDropdown').select2('destroy');
                    }

                    if (this.isPSTWAIR) {
                        $('#airstationDropdown').select2({
                            placeholder: "Select Station",
                            allowClear: true
                        }).on('change', (e) => {
                            this.editForm.stationId = $(e.currentTarget).val();
                        });
                    }

                    if (this.isPSTWMARINE) {
                        $('#marinestationDropdown').select2({
                            placeholder: "Select Station",
                            allowClear: true
                        }).on('change', (e) => {
                            this.editForm.stationId = $(e.currentTarget).val();
                        });
                    }
                },
                async fetchOvertimeRecord(id) {
                    try {
                        const res = await fetch(`/OvertimeAPI/GetOvertimeRecordById/${id}`);
                        if (res.ok) {
                            const data = await res.json();
                            this.populateForm(data);
                        } else {
                            console.error("Failed to fetch overtime record.");
                            alert("Failed to fetch overtime record.");
                        }
                    } catch (err) {
                        console.error("Fetch error:", err);
                    }
                },

                populateForm(record) {
                    this.editForm = {
                        ...record,
                        otDate: record.otDate ? record.otDate.slice(0, 10) : "",
                    };
                    this.calculateOTAndBreak();
                },

                async fetchStations() {
                    try {
                        const response = await fetch(`/OvertimeAPI/GetStationsByDepartmentAir`);
                        if (!response.ok) throw new Error("Failed to fetch stations");
                        this.airstationList = await response.json();
                    } catch (error) {
                        console.error("Error fetching air stations:", error);
                    }
                },
                async fetchStationsMarine() {
                    try {
                        const response = await fetch(`/OvertimeAPI/GetStationsByDepartmentMarine`);
                        if (!response.ok) throw new Error("Failed to fetch stations");
                        this.marinestationList = await response.json();
                    } catch (error) {
                        console.error("Error fetching marine stations:", error);
                    }
                },

                async fetchUserAndRelatedData() {
                    try {
                        const response = await fetch(`/IdentityAPI/GetUserInformation/`, { method: 'POST' });
                        if (response.ok) {
                            const data = await response.json();
                            this.currentUser = data?.userInfo || null;
                            this.editForm.userId = this.currentUser?.id || null;

                            const isSuperAdmin = this.currentUser?.role?.includes("SuperAdmin");
                            const isSystemAdmin = this.currentUser?.role?.includes("SystemAdmin");
                            const isDepartmentTwo = this.currentUser?.department?.departmentId === 2;
                            const isDepartmentThree = this.currentUser?.department?.departmentId === 3;
                            this.isPSTWAIR = isSuperAdmin || isSystemAdmin || isDepartmentTwo;
                            this.isPSTWMARINE = isSuperAdmin || isSystemAdmin || isDepartmentThree;

                            if (this.editForm.userId) {
                                await this.fetchUserStateAndHolidays();
                                await this.fetchUserFlexiHour();
                            }
                        } else {
                            console.error(`Failed to fetch user: ${response.statusText}`);
                        }
                    } catch (error) {
                        console.error("Error fetching user:", error);
                    }
                },

                async fetchUserStateAndHolidays() {
                    try {
                        const response = await fetch(`/OvertimeAPI/GetUserStateAndHolidays/${this.editForm.userId}`);
                        if (!response.ok) {
                            throw new Error(`Failed to fetch user state and holidays: ${response.statusText}`);
                        }
                        const data = await response.json();
                        this.userState = data.state;
                        this.publicHolidays = data.publicHolidays;
                        this.updateDayType();
                    } catch (error) {
                        console.error("Error fetching user state and holidays:", error);
                        this.editForm.otDays = "Weekday"; // Default to weekday on error
                    }
                },

                async fetchUserFlexiHour() {
                    try {
                        if (!this.editForm.userId) {
                            console.warn("Cannot fetch flexi hour: User ID is not available.");
                            this.userFlexiHour = null;
                            return;
                        }
                        const response = await fetch(`/OvertimeAPI/GetUserFlexiHour/${this.editForm.userId}`);
                        if (response.ok) {
                            const data = await response.json();
                            if (data && data.flexiHour) {
                                this.userFlexiHour = data.flexiHour;
                            } else {
                                console.warn("Flexi hour data is missing or malformed in API response.", data);
                                this.userFlexiHour = null;
                            }
                        } else {
                            console.error(`Failed to fetch user flexi hour: ${response.statusText}`);
                            this.userFlexiHour = null;
                        }
                    } catch (error) {
                        console.error("Error fetching user flexi hour:", error);
                        this.userFlexiHour = null;
                    }
                },

                limitCharCount(event) {
                    if (this.editForm.otDescription && this.editForm.otDescription.length > 150) {
                        this.editForm.otDescription = this.editForm.otDescription.substring(0, 150);
                        event.preventDefault();
                    }
                },

                calculateOTAndBreak() {
                    let officeOT = this.calculateTimeDifference(
                        this.editForm.officeFrom,
                        this.editForm.officeTo,
                        this.editForm.officeBreak
                    );

                    let afterOT = this.calculateTimeDifference(
                        this.editForm.afterFrom,
                        this.editForm.afterTo,
                        this.editForm.afterBreak
                    );

                    let totalOTMinutes = officeOT.minutes + afterOT.minutes;
                    let totalOTHours = officeOT.hours + afterOT.hours + Math.floor(totalOTMinutes / 60);
                    totalOTMinutes = totalOTMinutes % 60;

                    this.totalOTHours = `${totalOTHours} hr ${totalOTMinutes} min`;

                    let totalBreakMinutes = (this.editForm.officeBreak || 0) + (this.editForm.afterBreak || 0);
                    let totalBreakHours = Math.floor(totalBreakMinutes / 60);
                    totalBreakMinutes = totalBreakMinutes % 60;

                    this.totalBreakHours = `${totalBreakHours} hr ${totalBreakMinutes} min`;
                    this.updateDayType();
                },

                updateTime(fieldName) {
                    if (fieldName === 'officeFrom') {
                        this.editForm.officeFrom = this.roundToNearest30(this.editForm.officeFrom);
                    } else if (fieldName === 'officeTo') {
                        this.editForm.officeTo = this.roundToNearest30(this.editForm.officeTo);
                    } else if (fieldName === 'afterFrom') {
                        this.editForm.afterFrom = this.roundToNearest30(this.editForm.afterFrom);
                    } else if (fieldName === 'afterTo') {
                        this.editForm.afterTo = this.roundToNearest30(this.editForm.afterTo);
                    }

                    this.validateTimeRanges();
                    this.calculateOTAndBreak();
                },

                validateTimeRanges() {
                    const validateRange = (fromTime, toTime, label) => {
                        if (!fromTime || !toTime) return true;

                        const start = this.parseTime(fromTime);
                        const end = this.parseTime(toTime);

                        const minAllowedFromMinutes = 16 * 60 + 30;
                        const maxAllowedFromMinutes = 23 * 60 + 30;
                        const startMinutes = start.hours * 60 + start.minutes;
                        const endMinutes = end.hours * 60 + end.minutes;

                        if (endMinutes === 0) {
                            if (fromTime === "00:00") {
                                alert(`Invalid ${label} Time: 'From' and 'To' cannot both be 00:00 (midnight).`);
                                return false;
                            }
                            if (startMinutes < minAllowedFromMinutes || startMinutes > maxAllowedFromMinutes) {
                                alert(`Invalid ${label} Time: If 'To' is 12:00 am (00:00), 'From' must start between end of your flexi hour to 11:30 pm on the same day.`);
                                return false;
                            }
                        } else if (endMinutes <= startMinutes) {
                            alert(`Invalid ${label} Time: 'To' time must be later than 'From' time for durations within the same day.`);
                            return false;
                        }
                        return true;
                    };


                    if (this.editForm.officeFrom && this.editForm.officeTo) {
                        if (!validateRange(this.editForm.officeFrom, this.editForm.officeTo, 'Office Hour')) {
                            this.editForm.officeTo = '';
                        }
                    }

                    if (this.editForm.afterFrom && this.editForm.afterTo) {
                        if (!validateRange(this.editForm.afterFrom, this.editForm.afterTo, 'After Office Hour')) {
                            this.editForm.afterTo = '';
                        }
                    }
                },

                roundToNearest30(timeStr) {
                    if (!timeStr) return timeStr;
                    const [hours, minutes] = timeStr.split(':').map(Number);
                    const totalMinutes = hours * 60 + minutes;
                    const remainder = totalMinutes % 30;

                    const roundedMinutes = remainder < 15 ? totalMinutes - remainder : totalMinutes + (30 - remainder);

                    const adjustedHour = Math.floor(roundedMinutes / 60) % 24;
                    const adjustedMinute = roundedMinutes % 60;

                    return `${adjustedHour.toString().padStart(2, '0')}:${adjustedMinute.toString().padStart(2, '0')}`;
                },

                calculateTimeDifference(startTime, endTime, breakMinutes) {
                    if (!startTime || !endTime) {
                        return { hours: 0, minutes: 0 };
                    }

                    const start = this.parseTime(startTime);
                    const end = this.parseTime(endTime);

                    let diffMinutes;

                    if (end.hours === 0 && end.minutes === 0 && (start.hours > 0 || start.minutes > 0)) {
                        diffMinutes = (24 * 60) - (start.hours * 60 + start.minutes);
                    } else if (end.hours * 60 + end.minutes <= start.hours * 60 + start.minutes) {

                        return { hours: 0, minutes: 0 };

                    } else {

                        diffMinutes = (end.hours * 60 + end.minutes) - (start.hours * 60 + start.minutes);
                    }

                    diffMinutes -= breakMinutes || 0;
                    if (diffMinutes < 0) diffMinutes = 0;

                    const hours = Math.floor(diffMinutes / 60);
                    const minutes = diffMinutes % 60;

                    return { hours, minutes };
                },
                parseTime(timeString) {
                    const [hours, minutes] = timeString.split(':').map(Number);
                    return { hours, minutes };
                },

                formatTime(timeString) {
                    if (!timeString) return null;
                    const [hours, minutes] = timeString.split(':');
                    return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}:00`;
                },

                handleDateChange() {
                    this.updateDayType();
                    this.calculateOTAndBreak();
                },

                updateDayType() {
                    if (!this.editForm.otDate || !this.userState) {
                        this.editForm.otDays = "";
                        return;
                    }

                    const selectedDateObj = new Date(this.editForm.otDate + "T00:00:00");
                    const dayOfWeek = selectedDateObj.getDay();
                    const year = selectedDateObj.getFullYear();
                    const month = selectedDateObj.getMonth() + 1;
                    const day = selectedDateObj.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;

                    if (this.publicHolidays.some(holiday => holiday.date === formattedDate)) {
                        this.editForm.otDays = "Public Holiday";
                        return;
                    }

                    const weekendId = this.userState.weekendId;
                    const isWeekend = (() => {
                        if (weekendId === 1) {
                            return dayOfWeek === 5 || dayOfWeek === 6; // Friday and Saturday
                        } else if (weekendId === 2) {
                            return dayOfWeek === 6 || dayOfWeek === 0; // Saturday and Sunday
                        } else {
                            return dayOfWeek === 0; // Default Sunday
                        }
                    })();

                    if (isWeekend) {
                        this.editForm.otDays = "Weekend";
                        return;
                    }

                    this.editForm.otDays = "Weekday";
                },

                validateForm() {
                    this.validationErrors = {
                        otDate: "",
                        stationId: "",
                        otDescription: "",
                        timeEntries: ""
                    };

                    let isValid = true;
                    let errorMessages = [];

                    if (!this.editForm.otDate) {
                        this.validationErrors.otDate = "Date is required.";
                        errorMessages.push("Date is required.");
                        isValid = false;
                    }

                    if ((this.isPSTWAIR || this.isPSTWMARINE) && !this.editForm.stationId) {
                        this.validationErrors.stationId = "Station is required.";
                        errorMessages.push("Station is required.");
                        isValid = false;
                    }

                    if (!this.editForm.otDescription || this.editForm.otDescription.trim() === "") {
                        this.validationErrors.otDescription = "Work brief description is required.";
                        errorMessages.push("Work brief description is required.");
                        isValid = false;
                    }

                    const officeFromFilled = !!this.editForm.officeFrom;
                    const officeToFilled = !!this.editForm.officeTo;
                    const afterFromFilled = !!this.editForm.afterFrom;
                    const afterToFilled = !!this.editForm.afterTo;

                    if (!this.isOfficeHoursDisabled) {
                        if (officeFromFilled !== officeToFilled) {
                            this.validationErrors.timeEntries = "Both 'From' and 'To' times must be provided for Office Hours, or leave both empty.";
                            errorMessages.push("Both 'From' and 'To' times must be provided for Office Hours, or leave both empty.");
                            isValid = false;
                        } else if (officeFromFilled && officeToFilled) {
                            if (!this.validateTimeRangeForSubmission(this.editForm.officeFrom, this.editForm.officeTo, 'Office Hour')) {
                                isValid = false;
                            }
                        }
                    }

                    if (afterFromFilled !== afterToFilled) {
                        this.validationErrors.timeEntries = (this.validationErrors.timeEntries ? this.validationErrors.timeEntries + "\n" : "") + "Both 'From' and 'To' times must be provided for After Office Hours, or leave both empty.";
                        errorMessages.push("Both 'From' and 'To' times must be provided for After Office Hours, or leave both empty.");
                        isValid = false;
                    } else if (afterFromFilled && afterToFilled) {
                        if (!this.validateTimeRangeForSubmission(this.editForm.afterFrom, this.editForm.afterTo, 'After Office Hour')) {
                            isValid = false;
                        }
                    }

                    const hasAnyValidTimeEntry = (!this.isOfficeHoursDisabled && officeFromFilled && officeToFilled) || (afterFromFilled && afterToFilled);

                    if (!hasAnyValidTimeEntry && errorMessages.length === 0) {
                        this.validationErrors.timeEntries = "Please enter either Office Hours or After Office Hours.";
                        errorMessages.push("Please enter either Office Hours or After Office Hours.");
                        isValid = false;
                    }

                    if (!isValid) {
                        alert("Please correct the following issues:\n\n" + errorMessages.join("\n"));
                    }

                    return isValid;
                },

                validateTimeRangeForSubmission(fromTime, toTime, label) {
                    if (!fromTime || !toTime) return true;

                    const start = this.parseTime(fromTime);
                    const end = this.parseTime(toTime);

                    const minAllowedFromMinutes = 16 * 60 + 30;
                    const maxAllowedFromMinutes = 23 * 60 + 30;
                    const startMinutes = start.hours * 60 + start.minutes;
                    const endMinutes = end.hours * 60 + end.minutes;

                    if (endMinutes === 0) {
                        if (fromTime === "00:00") {
                            alert(`Invalid ${label} Time: 'From' and 'To' cannot both be 00:00 (midnight).`);
                            return false;
                        }
                        if (startMinutes < minAllowedFromMinutes || startMinutes > maxAllowedFromMinutes) {
                            alert(`Invalid ${label} Time: If 'To' is 12:00 am (00:00), 'From' must start between end of your flexi hour to 11:30 pm on the same day..`);
                            return false;
                        }
                    } else if (endMinutes <= startMinutes) {
                        alert(`Invalid ${label} Time: 'To' time must be later than 'From' time for durations within the same day.`);
                        return false;
                    }
                    return true;
                },

                validateAndUpdate() {
                    if (this.validateForm()) {
                        this.updateRecord();
                    }
                },

                async updateRecord() {
                    const data = {
                        OvertimeId: this.editForm.overtimeId,
                        OtDate: this.editForm.otDate,
                        StationId: this.editForm.stationId || null,
                        OtDescription: this.editForm.otDescription || "",
                        OtDays: this.editForm.otDays,
                        OfficeFrom: this.isOfficeHoursDisabled ? null : (this.editForm.officeFrom || null),
                        OfficeTo: this.isOfficeHoursDisabled ? null : (this.editForm.officeTo || null),
                        OfficeBreak: this.isOfficeHoursDisabled ? 0 : (this.editForm.officeBreak || 0),
                        AfterFrom: this.editForm.afterFrom || null,
                        AfterTo: this.editForm.afterTo || null,
                        AfterBreak: this.editForm.afterBreak || 0,
                        UserId: this.currentUser?.id
                    };

                    try {
                        const response = await fetch(`/OvertimeAPI/UpdateOvertimeRecord`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(data)
                        });

                        if (response.ok) {
                            const result = await response.json();
                            alert(result.message || "Overtime record updated successfully!");
                            window.location.href = this.previousPage;
                        } else {
                            let errorMessage = "Failed to update overtime record.";
                            try {
                                const errorData = await response.json();
                                errorMessage = errorData.message || errorMessage;
                            } catch (jsonError) {
                                errorMessage = await response.text();
                                if (!errorMessage) errorMessage = "An unexpected error occurred.";
                            }
                            alert(`Error: ${errorMessage} (Status: ${response.status})`);
                        }
                    } catch (error) {
                        console.error("Error updating record:", error);
                        alert("An unexpected network error occurred while updating the overtime record. Please try again.");
                    }
                },

                goBack() {
                    if (this.returnMonth && this.returnYear) {
                        window.location.href = `/OTcalculate/Overtime/OtRecords?month=${this.returnMonth}&year=${this.returnYear}`;
                    } else {
                        window.location.href = this.previousPage;
                    }
                },
                clearOfficeHours() {
                    this.editForm.officeFrom = "";
                    this.editForm.officeTo = "";
                    this.editForm.officeBreak = 0;
                    this.calculateOTAndBreak();
                },
                clearAfterHours() {
                    this.editForm.afterFrom = "";
                    this.editForm.afterTo = "";
                    this.editForm.afterBreak = 0;
                    this.calculateOTAndBreak();
                },
            }
        });

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