@{
    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</label>
                        <input type="date" class="form-control" v-model="editForm.otDate"
                               v-on:input="calculateOTAndBreak">
                    </div>

                    <!-- OFFICE HOURS -->
                    <h6 class="fw-bold">OFFICE HOURS</h6>
                    <div class="d-flex gap-3 mb-3 align-items-end flex-wrap">
                        <div style="flex: 1;">
                            <label for="officeFrom">From</label>
                            <input type="time" class="form-control" v-model="editForm.officeFrom"
                                   v-on:input="calculateOTAndBreak">
                        </div>
                        <div style="flex: 1;">
                            <label for="officeTo">To</label>
                            <input type="time" id="officeTo" class="form-control" v-model="editForm.officeTo"
                                   v-on:input="calculateOTAndBreak">
                        </div>
                        <div style="flex: 1;">
                            <label for="officeBreak">Break Hours (Minutes)</label>
                            <div class="d-flex">
                                <input type="number" id="officeBreak" class="form-control"
                                       v-model="editForm.officeBreak"
                                       v-on:input="calculateOTAndBreak" placeholder="e.g. 30">
                                <button class="btn btn-outline-danger ms-2" v-on:click="clearOfficeHours" title="Clear Office Hours">
                                    <i class="bi bi-x-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- OUTSIDE OFFICE HOURS -->
                    <h6 class="fw-bold text-danger">OUTSIDE OFFICE HOURS</h6>
                    <div class="d-flex gap-3 mb-3 align-items-end flex-wrap">
                        <div style="flex: 1;">
                            <label for="outsideFrom">From</label>
                            <input type="time" id="outsideFrom" class="form-control" v-model="editForm.outsideFrom"
                                   v-on:input="calculateOTAndBreak">
                        </div>
                        <div style="flex: 1;">
                            <label for="outsideTo">To</label>
                            <input type="time" id="outsideTo" class="form-control" v-model="editForm.outsideTo"
                                   v-on:input="calculateOTAndBreak">
                        </div>
                        <div style="flex: 1;">
                            <label for="outsideBreak">Break Hours (Minutes)</label>
                            <div class="d-flex">
                                <input type="number" id="outsideBreak" class="form-control"
                                       v-model="editForm.outsideBreak"
                                       v-on:input="calculateOTAndBreak" placeholder="e.g. 45">
                                <button class="btn btn-outline-danger ms-2" v-on:click="clearOutsideHours" title="Clear Outside Hours">
                                    <i class="bi bi-x-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>


                    <div class="mb-3" v-if="isPSTWAIR">
                        <label for="airstationDropdown">Air Station</label>
                        <select id="airstationDropdown" class="form-control" v-model="editForm.stationId">
                            <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">*Only for PSTW AIR</small>
                    </div>


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

                    </div>

                </div>

                <div class="col-md-5">
                    <label class="mb-2">Day</label>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" id="weekday" v-model="editForm.selectedDayType" value="Weekday">
                        <label class="form-check-label" for="weekday">Weekday</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" id="weekend" v-model="editForm.selectedDayType" value="Weekend">
                        <label class="form-check-label" for="weekend">Weekend</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" id="publicHoliday" v-model="editForm.selectedDayType"
                               value="Public Holiday">
                        <label class="form-check-label" for="publicHoliday">Public Holiday</label>
                    </div>

                    <div class="mb-3 mt-3">
                        <label for="fileUpload">Upload File:</label>
                        <input type="file" id="fileUpload" class="form-control" accept="application/pdf"
                               v-on:change="handleFileUpload" ref="fileInput">
                        <small class="text-danger">*upload pdf file only</small>
                    </div>
                    <div v-if="editForm.filePath" class="mb-2">
                        <a :href="editForm.filePath" target="_blank" class="btn btn-outline-primary btn-sm">
                            View Existing PDF
                        </a>
                    </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="updateRecord">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,
                        outsideFrom: "",
                        outsideTo: "",
                        outsideBreak: 0,
                        stationId: "",
                        otDescription: "",
                        otDays: "",
                        filePath: "",
                        newFile: null,
                        userId: null,
                    },
                    airstationList: [],
                    totalOTHours: "0 hr 0 min",
                    totalBreakHours: "0 hr 0 min",
                    uploadedFile: null,
                    currentUser: null,
                    isPSTWAIR: false,
                };
            },

            computed: {
                charCount() {
                    return this.editForm.otDescription.length;
                }
            },
            async mounted() {
                const urlParams = new URLSearchParams(window.location.search);
                const overtimeId = urlParams.get('overtimeId');
                if (overtimeId) {
                    await this.fetchOvertimeRecord(overtimeId);
                }

                await this.fetchUser();

                if (this.isPSTWAIR) {
                    await this.fetchStations();
                }
            },
            methods: {
                async fetchOvertimeRecord(id) {
                    try {
                        const res = await fetch(`/OvertimeAPI/GetOvertimeRecordById/${id}`);
                        if (res.ok) {
                            const data = await res.json();
                            this.populateForm(data); // Fill form fields with data
                        } else {
                            alert("Failed to fetch overtime record.");
                        }
                    } catch (err) {
                        console.error("Fetch error:", err);
                    }
                },
                populateForm(record) {
                    this.editForm = {
                        ...record,
                        otDate: record.otDate.slice(0, 10),
                        selectedDayType: record.otDays,
                    };

                    this.calculateOTAndBreak();
                },
                async fetchStations() {
                    try {
                        const response = await fetch(`/OvertimeAPI/GetStationsByDepartment`);
                        if (!response.ok) throw new Error("Failed to fetch stations");

                        this.airstationList = await response.json();
                    } catch (error) {
                        console.error("Error fetching stations:", error);
                    }
                },
                async fetchUser() {
                    try {
                        const response = await fetch(`/IdentityAPI/GetUserInformation/`, { method: 'POST' });
                        if (response.ok) {
                            const data = await response.json();
                            this.currentUser = data?.userInfo || null;
                            this.userId = this.currentUser?.id || null;

                            console.log("Fetched User:", this.currentUser);
                            console.log("Dept ID:", this.currentUser?.departmentId);

                        if (this.currentUser?.department?.departmentId === 2) {
                            this.isPSTWAIR = true;
                                console.log("User is PSTW AIR");
                            }
                        } else {
                            console.error(`Failed to fetch user: ${response.statusText}`);
                        }
                    } catch (error) {
                        console.error("Error fetching user:", error);
                    }
                },
                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 outsideOT = this.calculateTimeDifference(
                        this.editForm.outsideFrom,
                        this.editForm.outsideTo,
                        this.editForm.outsideBreak
                    );

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

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

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

                    this.totalBreakHours = `${totalBreakHours} hr ${totalBreakMinutes} min`;
                },
                calculateTimeDifference(startTime, endTime, breakMinutes) {
                    if (!startTime || !endTime) {
                        return { hours: 0, minutes: 0 };
                    }

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

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

                    diffMinutes -= breakMinutes || 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 };
                },
                handleFileUpload(event) {
                    const file = event.target.files[0];

                    if (file && file.type === "application/pdf") {
                        this.editForm.newFile = file;
                    } else {
                        alert("Please upload a valid PDF file.");
                    }
                },
                formatTime(timeString) {
                    if (!timeString) return null;
                    const [hours, minutes] = timeString.split(':');
                    return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}:00`; //HH:mm:ss format
                },
                 async updateRecord() {
                    try {
                        const formData = new FormData();

                        formData.append("OvertimeId", this.editForm.overtimeId);
                        formData.append("OtDate", this.editForm.otDate);
                        formData.append("StationId", this.editForm.stationId || "");
                        formData.append("OtDescription", this.editForm.otDescription || "");
                        formData.append("OtDays", this.editForm.selectedDayType);
                        formData.append("OfficeFrom", this.formatTime(this.editForm.officeFrom) || "");
                        formData.append("OfficeTo", this.formatTime(this.editForm.officeTo) || "");
                        formData.append("OutsideFrom", this.formatTime(this.editForm.outsideFrom) || "");
                        formData.append("OutsideTo", this.formatTime(this.editForm.outsideTo) || "");
                        formData.append("FilePath", this.editForm.filePath || "");


                        // Conditionally include nullable fields
                        if (this.editForm.outsideFrom) {
                            formData.append("outsideFrom", this.formatTime(this.editForm.outsideFrom));
                        }
                        if (this.editForm.outsideTo) {
                            formData.append("outsideTo", this.formatTime(this.editForm.outsideTo));
                        }

                        formData.append("officeBreak", this.editForm.officeBreak || 0);
                        formData.append("outsideBreak", this.editForm.outsideBreak || 0);

                        // Required field
                        formData.append("userId", this.currentUser?.id);

                        // File handling
                        if (this.editForm.newFile) {
                            formData.append("newFile", this.editForm.newFile);
                        } else {
                            formData.append("filePath", this.editForm.filePath || ""); // must send this
                        }

                        const res = await fetch('/OvertimeAPI/UpdateOvertimeRecord', {
                            method: 'POST',
                            body: formData
                        });

                        if (res.ok) {
                            alert("Record updated successfully.");
                            window.location.href = "/OTcalculate/Overtime/OtRecords";
                        } else {
                            const errorText = await res.text();
                            console.error("Server returned:", errorText);
                            alert("Failed to update record.");
                        }
                    } catch (err) {
                        console.error("Update error:", err);
                    }
                },

                goBack() {
                    window.location.href = "/OTcalculate/Overtime/OtRecords";
                },
                clearOfficeHours() {
                    this.editForm.officeFrom = "";
                    this.editForm.officeTo = "";
                    this.editForm.officeBreak = 0;
                    this.calculateOTAndBreak();
                },
                clearOutsideHours() {
                    this.editForm.outsideFrom = "";
                    this.editForm.outsideTo = "";
                    this.editForm.outsideBreak = 0;
                    this.calculateOTAndBreak();
                },

            }
        });

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