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

<style>
    .table-container {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 25px;
        margin-bottom: 20px;
    }

    .table th, .table td {
        vertical-align: middle;
        text-align: center;
        font-size: 14px;
    }

    .header-green {
        background-color: #d9ead3 !important;
    }

    .header-blue {
        background-color: #cfe2f3 !important;
    }

    .header-orange {
        background-color: #fce5cd !important;
    }

    input.form-control,
    select.form-control,
    .btn {
        border-radius: 10px;
        font-size: 13px;
    }

    .table-primary td {
        background-color: #e6f0ff !important;
    }

    .table-responsive {
        overflow-x: auto;
    }

    td.wrap-text {
        white-space: pre-wrap;
        word-wrap: break-word;
        max-width: 300px;
        text-align: left;
    }

    .description-preview {
        max-height: 3.6em;
        overflow: hidden;
        cursor: pointer;
        transition: max-height 0.3s ease;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

        .description-preview.expanded {
            max-height: none;
        }
</style>

<div id="app" style="max-width: 1300px; margin: auto; font-size: 13px;">
    <div class="mb-3 d-flex flex-wrap">
        <div class="me-2 mb-2">
            <label>Month</label>
            <select class="form-control form-control-sm" v-model="selectedMonth">
                <option v-for="(m, i) in months" :value="i + 1">{{ m }}</option>
            </select>
        </div>
        <div class="mb-2">
            <label>Year</label>
            <select class="form-control form-control-sm" v-model="selectedYear">
                <option v-for="y in years" :value="y">{{ y }}</option>
            </select>
        </div>
    </div>

    <div id="print-section" class="table-container table-responsive">
        <table class="table table-bordered table-sm table-striped">
            <thead>
                <tr>
                    <th class="header-green" rowspan="2">Date</th>
                    <th class="header-blue" colspan="3">Office Hour</th>
                    <th class="header-blue" colspan="3">After Office Hour</th>
                    <th class="header-orange" rowspan="2">Total OT Hours</th>
                    <th class="header-orange" rowspan="2">Break (min)</th>
                    <th class="header-orange" rowspan="2">Net OT Hours</th>
                    <th class="header-orange" rowspan="2" v-if="isPSTWAIR">Station</th>
                    <th class="header-green" rowspan="2">Days</th>
                    <th class="header-blue" rowspan="2">Description</th>
                    <th class="header-green" rowspan="2">Action</th>
                </tr>
                <tr>
                    <th class="header-blue">From</th>
                    <th class="header-blue">To</th>
                    <th class="header-blue">Break</th>
                    <th class="header-blue">From</th>
                    <th class="header-blue">To</th>
                    <th class="header-blue">Break</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(record, index) in filteredRecords" :key="record.overtimeId">
                    <td>{{ formatDate(record.otDate) }}</td>
                    <td>{{ formatTime(record.officeFrom) }}</td>
                    <td>{{ formatTime(record.officeTo) }}</td>
                    <td>{{ formatMinutesToHourMinute(record.officeBreak) }}</td>
                    <td>{{ formatTime(record.afterFrom) }}</td>
                    <td>{{ formatTime(record.afterTo) }}</td>
                    <td>{{ formatMinutesToHourMinute(record.afterBreak) }}</td>
                    <td>{{ formatHourMinute(calcTotalTime(record)) }}</td>
                    <td>{{ formatMinutesToHourMinute(calcBreakTotal(record)) }}</td>
                    <td>{{ formatHourMinute(calcNetHours(record)) }}</td>
                    <td v-if="isPSTWAIR">{{ record.stationName || 'N/A' }}</td>
                    <td>{{ record.otDays }}</td>
                    <td class="wrap-text">
                        <div class="description-preview" v-on:click="toggleDescription(index)" :class="{ expanded: expandedDescriptions[index] }">
                            {{ record.otDescription }}
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-light border rounded-circle me-1"
                                title="Edit"
                                :disabled="hasSubmitted"
                                v-on:click="editRecord(index)">
                            <i class="bi bi-pencil-fill text-warning fs-5"></i>
                        </button>
                        <button class="btn btn-light border rounded-circle"
                                title="Delete"
                                :disabled="hasSubmitted"
                                v-on:click="deleteRecord(index)">
                            <i class="bi bi-trash-fill text-danger fs-5"></i>
                        </button>
                    </td>

                </tr>
                <tr v-if="filteredRecords.length === 0">
                    <td :colspan="isPSTWAIR ? 14 : 13">No records found.</td>
                </tr>
                <tr class="table-primary fw-bold">
                    <td>TOTAL</td>
                    <td colspan="6"></td>
                    <td>{{ formatHourMinute(totalHours) }}</td>
                    <td>{{ formatHourMinute(totalBreak) }}</td>
                    <td>{{ formatHourMinute(totalNetTime) }}</td>
                    <td v-if="isPSTWAIR"></td>
                    <td colspan="3"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="mt-3 d-flex flex-wrap gap-2">
        <button class="btn btn-primary btn-sm" v-on:click="printPdf" :disabled="noRecordsFound"><i class="bi bi-printer"></i> Print</button>
        <button class="btn btn-dark btn-sm" v-on:click="downloadPdf" :disabled="noRecordsFound"><i class="bi bi-file-pdf"></i> Save</button>
        <button class="btn btn-success btn-sm" v-on:click="downloadExcel(selectedMonth, selectedYear)" :disabled="noRecordsFound"><i class="bi bi-file-earmark-excel"></i> Excel</button>
        <button class="btn btn-success btn-sm" :disabled="hasSubmitted" v-on:click="openSubmitModal"><i class="bi bi-send"></i>{{ hasSubmitted ? ' Submitted' : ' Submit' }}</button>
    </div>
    <div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="submitModalLabel">Submit Overtime</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="file" class="form-control" v-on:change="handleFileUpload">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" v-on:click="submitOvertime">Submit</button>
                </div>
            </div>
        </div>
    </div>

</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                const currentYear = new Date().getFullYear();
                const currentMonth = new Date().getMonth() + 1;
                const urlParams = new URLSearchParams(window.location.search); 

                let initialMonth = urlParams.get('month');
                let initialYear = urlParams.get('year');
       
                if (!initialMonth && sessionStorage.getItem('lastSelectedMonth')) {
                    initialMonth = sessionStorage.getItem('lastSelectedMonth');
                }
                if (!initialYear && sessionStorage.getItem('lastSelectedYear')) {
                    initialYear = sessionStorage.getItem('lastSelectedYear');
                }

                initialMonth = initialMonth ? parseInt(initialMonth) : currentMonth;
                initialYear = initialYear ? parseInt(initialYear) : currentYear;
        
                return {
                    otRecords: [],
                    userId: null,
                    isPSTWAIR: false,
                    selectedMonth: initialMonth, 
                    selectedYear: initialYear,  
                    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    years: Array.from({ length: 10 }, (_, i) => currentYear - 5 + i),
                    expandedDescriptions: {},
                    selectedFile: null,
                    hasSubmitted: false,
                };
            },
            watch: {
                selectedMonth() {
                    this.getSubmissionStatus();
                     sessionStorage.setItem('lastSelectedMonth', this.selectedMonth);
                },
                selectedYear() {
                    this.getSubmissionStatus();
                    sessionStorage.setItem('lastSelectedYear', this.selectedYear);
                }
            },
            computed: {
                filteredRecords() {
                    return this.otRecords
                        .filter(r => new Date(r.otDate).getMonth() + 1 === this.selectedMonth && new Date(r.otDate).getFullYear() === this.selectedYear)
                        .sort((a, b) => new Date(a.otDate) - new Date(b.otDate));
                },
                noRecordsFound() {
                    return this.filteredRecords.length === 0;
                },
                totalHours() {
                    const total = this.filteredRecords.reduce((sum, r) => sum + this.calcTotalHours(r), 0);
                    const hours = Math.floor(total);
                    const minutes = Math.round((total - hours) * 60);
                    return { hours, minutes };
                },
                totalBreak() {
                    const totalMin = this.filteredRecords.reduce((sum, r) => sum + this.calcBreakTotal(r), 0);
                    const hours = Math.floor(totalMin / 60);
                    const minutes = totalMin % 60;
                    return { hours, minutes };
                },
                totalNetTime() {
                    const totalMinutes = (this.totalHours.hours * 60 + this.totalHours.minutes) -
                                         (this.totalBreak.hours * 60 + this.totalBreak.minutes);
                    return {
                        hours: Math.floor(totalMinutes / 60),
                        minutes: Math.round(totalMinutes % 60)
                    };
                },
            },
            async mounted() {
                await this.initUserAndRecords();
                await this.getSubmissionStatus();

                sessionStorage.setItem('lastSelectedMonth', this.selectedMonth);
                sessionStorage.setItem('lastSelectedYear', this.selectedYear);
            },
            methods: {
                async initUserAndRecords() {
                    await this.fetchUser();
                    if (this.userId) {
                        await this.fetchOtRecords();
                    }
                },
                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?.department?.departmentId);
                            console.log("Roles:", this.currentUser?.role);

                            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 || isDepartmentThree;
                            console.log("isPSTWAIR:", this.isPSTWAIR);

                        } else {
                            console.error(`Failed to fetch user: ${response.statusText}`);
                        }
                    } catch (error) {
                        console.error("Error fetching user:", error);
                    }
                },

                async fetchOtRecords() {
                    try {
                        const res = await fetch(`/OvertimeAPI/GetUserOvertimeRecords/${this.userId}`);
                        this.otRecords = await res.json();
                    } catch (err) {
                        console.error("Records fetch error:", err);
                    }
                },
                async getSubmissionStatus() {
                    try {
                        const res = await fetch(`/OvertimeAPI/CheckOvertimeSubmitted/${this.userId}/${this.selectedMonth}/${this.selectedYear}`);
                        if (!res.ok) {
                            const errorText = await res.text();
                            console.error("Failed to check submission status:", errorText);
                            alert("Error checking submission status. Please try again.");
                            this.hasSubmitted = false; 
                            return;
                        }
                        this.hasSubmitted = await res.json();
                    } catch (err) {
                        console.error("Failed to parse submission status:", err);
                        alert("An unexpected error occurred while checking submission status.");
                        this.hasSubmitted = false;
                    }
                },
                toggleDescription(index) {
                    this.expandedDescriptions[index] = !this.expandedDescriptions[index];
                },

                formatDate(d) {
                    const date = new Date(d);
                    const day = date.getDate().toString().padStart(2, '0');
                    const month = (date.getMonth() + 1).toString().padStart(2, '0'); 
                    const year = date.getFullYear();
                    return `${day}/${month}/${year}`;
                },

                formatTime(t) {
                    if (!t) return "-";
                    const [hours, minutes] = t.split(':').map(Number);
                    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
                },
                formatMinutesToHourMinute(minutes) {
                    if (!minutes || isNaN(minutes)) return "00:00";
                    const hrs = Math.floor(minutes / 60);
                    const mins = minutes % 60;
                    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
                },

                getTimeDiff(from, to) {
                    if (!from || !to) return 0;

                    const [fh, fm] = from.split(":").map(Number);
                    const [th, tm] = to.split(":").map(Number);

                    let totalMinutes = (th * 60 + tm) - (fh * 60 + fm);

                    if (totalMinutes < 0) {
                        totalMinutes += 24 * 60; 
                    }

                    return totalMinutes / 60; 
                },
                calcTotalTime(r) {
                    const totalMinutes = this.calcTotalHours(r) * 60;
                    return {
                        hours: Math.floor(totalMinutes / 60),
                        minutes: Math.round(totalMinutes % 60)
                    };
                },
                calcTotalHours(r) {
                    return this.getTimeDiff(r.officeFrom, r.officeTo) + this.getTimeDiff(r.afterFrom, r.afterTo);
                },
                calcBreakTotal(r) {
                    return (r.officeBreak || 0) + (r.afterBreak || 0);
                },
                calcNetHours(r) {
                    const totalMinutes = (this.calcTotalHours(r) * 60) - this.calcBreakTotal(r);
                    return {
                        hours: Math.floor(totalMinutes / 60),
                        minutes: Math.round(totalMinutes % 60)
                    };
                },
                formatHourMinute(timeObj) {
                    if (!timeObj) return "-";
                    const hours = timeObj.hours.toString().padStart(2, '0');
                    const minutes = timeObj.minutes.toString().padStart(2, '0');
                    return `${hours}:${minutes}`;
                },
                editRecord(index) {
                    const record = this.filteredRecords[index];
                    window.location.href = `/OTcalculate/Overtime/EditOvertime?overtimeId=${record.overtimeId}&month=${this.selectedMonth}&year=${this.selectedYear}`;
                },
                async deleteRecord(index) {
                    const record = this.filteredRecords[index];
                    if (!confirm("Are you sure you want to delete this record?")) return;
                    try {
                        const res = await fetch(`/OvertimeAPI/DeleteOvertimeRecord/${record.overtimeId}`, { method: 'DELETE' });
                        if (res.ok) this.otRecords.splice(this.otRecords.indexOf(record), 1);
                        else alert("Failed to delete: " + await res.text());
                    } catch (err) {
                        console.error("Delete failed", err);
                        alert("Error deleting record.");
                    }
                },
                async printPdf() {
                    try {
                        const response = await fetch(`/OvertimeAPI/GetUserOvertimePdf/${this.userId}/${this.selectedMonth}/${this.selectedYear}`);
                        const blob = await response.blob();
                        const blobUrl = URL.createObjectURL(blob);
                        const printWindow = window.open(blobUrl, '_blank');
                        printWindow.onload = () => {
                            printWindow.focus();
                            printWindow.print();
                        };
                    } catch (error) {
                        console.error("Error generating PDF:", error);
                    }
                },

                async downloadPdf() {
                    try {
                        const url = `/OvertimeAPI/GetUserOvertimePdf/${this.userId}/${this.selectedMonth}/${this.selectedYear}`;
                        const response = await fetch(url);
                        const blob = await response.blob();

                        const downloadUrl = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = downloadUrl;
                        a.download = `Overtime_${this.selectedYear}_${this.selectedMonth}.pdf`;
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(downloadUrl);
                        a.remove();
                    } catch (error) {
                        console.error("Error downloading PDF:", error);
                        alert("Failed to download PDF. Please try again.");
                    }
                },
                downloadExcel(month, year) {
                    window.open(`/OvertimeAPI/GenerateUserOvertimeExcel/${this.userId}/${month}/${year}`, '_blank');
                },
                openSubmitModal() {
                    const modal = new bootstrap.Modal(document.getElementById('submitModal'));
                    modal.show();
                },
                handleFileUpload(event) {
                    this.selectedFile = event.target.files[0];
                },
                 async submitOvertime() {
                    if (!this.selectedFile) {
                        alert("Please select a file to upload.");
                        return;
                    }

                    const formData = new FormData();
                    formData.append('Month', this.selectedMonth);
                    formData.append('Year', this.selectedYear);
                    formData.append('File', this.selectedFile);

                    try {
                        const response = await fetch('/OvertimeAPI/SubmitOvertime', {
                            method: 'POST',
                            body: formData
                        });

                        if (response.ok) { // Check if the response status is 2xx
                            alert('Overtime submitted successfully!');

                            const modalEl = document.getElementById('submitModal');
                            const modalInstance = bootstrap.Modal.getInstance(modalEl);
                            modalInstance.hide();

                            await this.getSubmissionStatus();

                        } else {
                            const errorText = await response.text(); // Get error message from response body
                            alert(`Submission failed: ${errorText}`);
                            console.error('Submission failed:', response.status, errorText);
                        }
                    } catch (error) {
                        console.error("Error during submission:", error);
                        alert('An error occurred during submission.');
                    }
                }

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