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

<style>
    .hodstatus, .hrstatus {
        text-transform: capitalize;
    }

    .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-container {
        background: white;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
    }
</style>

<div id="otStatusApp" class="container mt-4">

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Month</th>
                <th>Year</th>
                <th>Submitted On</th>
                <th>HOD Status</th>
                <th>HR Status</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="status in statusList" :key="status.statusId">
                <td>{{ getMonthName(status.month) }}</td>
                <td>{{ status.year }}</td>
                <td>{{ formatDate(status.submitDate) }}</td>
                <td :class="status.hodStatus.toLowerCase()">{{ status.hodStatus }}</td>
                <td :class="status.hrStatus.toLowerCase()">{{ status.hrStatus }}</td>
                <td>
                    <button class="btn btn-sm btn-primary" v-on:click ="viewUpdates(status)">View Updates</button>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Modal -->
    <div v-if="selectedStatus" class="modal-mask">
        <div class="modal-container">
            <h5>Status History</h5>
            <p><strong>HOD Updates:</strong></p>
            <ul>
                <li v-for="update in parseJson(selectedStatus.hodUpdate)">
                    {{ formatUpdate(update) }}
                </li>
            </ul>
            <p><strong>HR Updates:</strong></p>
            <ul>
                <li v-for="update in parseJson(selectedStatus.hrUpdate)">
                    {{ formatUpdate(update) }}
                </li>
            </ul>
            <button class="btn btn-secondary" v-on:click ="selectedStatus = null">Close</button>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    statusList: [],
                    selectedStatus: null,
                };
            },
            mounted() {
                fetch('/OvertimeAPI/GetUserOtStatus')
                    .then(res => {
                        if (!res.ok) throw new Error(`HTTP error ${res.status}`);
                        return res.json();
                    })
                    .then(data => this.statusList = data)
                    .catch(err => console.error("Fetch error:", err));
            },
            methods: {
                formatDate(dateStr) {
                    return new Date(dateStr).toLocaleDateString();
                },
                getMonthName(month) {
                    return new Date(2000, month - 1, 1).toLocaleString('default', { month: 'long' });
                },
                parseJson(jsonStr) {
                    try {
                        return jsonStr ? JSON.parse(jsonStr) : [];
                    } catch (e) {
                        return [];
                    }
                },
                formatUpdate(update) {
                    return `${update.timestamp} - ${update.updatedBy} changed ${update.field} from '${update.oldValue}' to '${update.newValue}'`;
                },
                viewUpdates(status) {
                    this.selectedStatus = status;
                }
            }
        }).mount('#otStatusApp');
    </script>
}