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

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<div class="container">
    <div class="row justify-content-center">
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
                    <div class="box bg-success text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-currency-usd"></i>
                        </h1>
                        <h6 class="text-white">Rate</h6>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
                    <div class="box bg-purple text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-calendar"></i>
                        </h1>
                        <h6 class="text-white">Calendar</h6>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="app">
    <div class="container mt-3">

        @* Tab Page *@
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link"
                   :class="{ 'bg-purple text-white': activeTab === 'holiday', 'bg-light text-dark': activeTab !== 'holiday' }"
                   style="border: 1px solid #ddd;"
                   v-on:click="changeTab('holiday')">
                    Update Holiday
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link"
                   :class="{ 'bg-purple text-white': activeTab === 'weekend', 'bg-light text-dark': activeTab !== 'weekend' }"
                   style="border: 1px solid #ddd;"
                   v-on:click="changeTab('weekend')">
                    Update Weekend
                </a>
            </li>
        </ul>

        <div class="tab-content mt-3">

            @* Update Holiday *@
            <div v-if="activeTab === 'holiday'" class="card shadow-sm">
                <div class="card-body">
                    <label>Date:</label>
                    <input type="date" class="form-control" v-model="selectedDate">
                </div>
                <div class="card-body">
                    <label>State:</label>
                    <div class="row">
                        <div class="col-md-4" v-for="state in stateList" :key="state.stateId">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" :value="state.stateId" v-model="selectedStates">
                                <label class="form-check-label">{{ state.stateName }}</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <label>Holiday:</label>
                    <input type="text" class="form-control" v-model="holidayName" placeholder="Enter Holiday Name">
                </div>

                <div class="card-body text-center">
                    <button class="btn btn-danger" v-on:click="clearForm">Clear</button>
                    <button class="btn btn-success ms-3" v-on:click="updateHoliday">Save Holiday</button>
                </div>
            </div>

            <div v-if="activeTab === 'holiday'" class="card shadow-sm">
                <div class="card-body">
                    <label for="stateDropdown">Select State:</label>
                    <select id="stateDropdown" class="form-control" v-model="selectedState">
                        <option v-for="state in stateList" :key="state.stateId" :value="state.stateId">
                            {{ state.stateName }}
                        </option>
                    </select>
                </div>
                <div class="card-body">
                    <h5>Holidays for Selected State</h5>
                    <ul class="list-group">
                        <li class="list-group-item" v-for="holiday in filteredHolidays" :key="holiday.holidayId">
                            {{ formatDate(holiday.holidayDate) }} - {{ holiday.holidayName }}
                        </li>
                    </ul>
                </div>
            </div>

            @* Update Weekend *@
            <div v-if="activeTab === 'weekend'" class="card shadow-sm">
                <div class="card-body">
                    <p>Weekend Update Section</p>
                </div>
            </div>

        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    activeTab: 'holiday',
                    stateList: [],
                    selectedDate: '',
                    selectedStates: [],
                    holidayName: '',
                    selectedState: null,
                    holidayList: []
                };
            },

            mounted() {
                this.fetchStates();
                this.fetchHolidays();
            },

            computed: {
                filteredHolidays() {
                    return this.selectedState
                        ? this.holidayList.filter(h => h.stateId === this.selectedState)
                        : [];
                }
            },

            methods: {
                changeTab(tab) {
                    this.activeTab = tab;
                },

                async fetchStates() {
                    try {
                        const response = await fetch("/OvertimeAPI/GetStatesName");
                        if (!response.ok) throw new Error("Failed to fetch states");

                        const data = await response.json();
                        this.stateList = data.map(state => ({
                            stateId: state.stateId,
                            stateName: state.stateName
                        }));

                        if (this.stateList.length > 0) {
                            this.selectedState = this.stateList[0].stateId;
                        }
                    } catch (error) {
                        console.error("Error fetching states:", error);
                        alert("Failed to load state list.");
                    }
                },

                async fetchHolidays() {
                    try {
                        const response = await fetch("/OvertimeAPI/GetAllHolidays");
                        if (!response.ok) throw new Error("Failed to fetch holidays");

                        this.holidayList = await response.json();
                    } catch (error) {
                        console.error("Error fetching holidays:", error);
                        alert("Failed to load holiday list.");
                    }
                },

                formatDate(date) {
                    return new Date(date).toLocaleDateString();
                },

                async updateHoliday() {
                    try {
                        if (!this.selectedDate || this.selectedStates.length === 0 || !this.holidayName) {
                            alert("Please fill in all fields.");
                            return;
                        }

                        const payload = this.selectedStates.map(stateId => ({
                            holidayDate: this.selectedDate,
                            stateId: stateId,
                            holidayName: this.holidayName
                        }));

                        const response = await fetch("/OvertimeAPI/UpdateHoliday", {
                            method: "POST",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify(payload)
                        });

                        if (response.ok) {
                            alert("Holiday updated successfully!");
                            this.clearForm();
                            this.fetchHolidays();
                        } else {
                            alert("Failed to update holiday.");
                        }
                    } catch (error) {
                        console.error("Error updating holiday:", error);
                        alert("An error occurred while updating holiday.");
                    }
                },

                clearForm() {
                    this.selectedDate = '';
                    this.selectedStates = [];
                    this.holidayName = '';
                }
            }
        });

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