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

<div class="container mt-4" id="hod-approval-app">
    <table class="table table-bordered table-striped mt-3">
        <thead class="thead-light">
            <tr>
                <th>Name</th>
                <th>Submission Date</th>
                <th>Month/Year</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="submission in submittedRecords" :key="submission.userId + '-' + submission.monthYear">
                <td><a :href="'/OTcalculate/HodDashboard/OtReview/' + submission.userId + '/' + getMonthYearParts(submission.monthYear).month + '/' + getMonthYearParts(submission.monthYear).year">{{ submission.userName }}</a></td>
                <td>{{ formatDate(submission.submissionDate) }}</td>
                <td>{{ submission.monthYear }}</td>
                <td><button class="btn btn-info btn-sm">Review</button></td>
            </tr>
            <tr v-if="!submittedRecords.length">
                <td colspan="4">No overtime records submitted for review.</td>
            </tr>
        </tbody>
    </table>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
        const hodApprovalApp = Vue.createApp({
            data() {
                return {
                    submittedRecords: []
                };
            },
            mounted() {
                this.fetchSubmittedRecords();
            },
            methods: {
                async fetchSubmittedRecords() {
                    try {
                        const res = await fetch('/OvertimeAPI/GetSubmittedOvertimeRecords');
                        if (res.ok) {
                            this.submittedRecords = await res.json();
                        } else {
                            console.error("Failed to fetch submitted records:", await res.text());
                            alert("Error fetching submitted records.");
                        }
                    } catch (error) {
                        console.error("Error fetching submitted records:", error);
                        alert("An unexpected error occurred.");
                    }
                },
                formatDate(dateString) {
                    if (!dateString) return '-';
                    return new Date(dateString).toLocaleDateString();
                },
                getMonthYearParts(monthYearString) {
                    const parts = monthYearString.split('/');
                    return { month: parts[0], year: parts[1] };
                }
            }
        }).mount("#hod-approval-app");
    </script>
}