<template>
    <theme-table :route="'HolidayCreate'" :permisName="'Holiday Create'" @input="Searching">
        <span slot="main-title">
            {{ $t('Holiday') }}
        </span>

        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr>
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Title") }}</th>
                            <th>{{ $t("Date") }}</th>
                            <th>{{ $t("Day") }}</th>
                            <th>{{ $t("Month") }}</th>
                            <th>{{ $t("Year") }}</th>
                            <!-- <th>{{ $t("Weekend") }}</th> -->
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(cat, index) in holidays.data" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{ cat.title }}</td>
                            <td>{{ cat.date | onlyDate}}</td>
                            <td>{{funDay(moment(cat.date).format("dd"))}}</td>
                            <td>{{funMonth(moment(cat.date).format("MMM"))}}</td>
                            <td>{{ cat.year }}</td>
                            <!-- <td> <span v-for="(day, weekendIndex) in cat.weekend" :key="weekendIndex">
                                    {{ moment(day).format('YYYY-MM-DD') }}
                                    <span v-if="weekendIndex < cat.weekend.length - 1">, </span>
                                </span>
                            </td> -->
                            <td>
                                <router-link v-if="$can('Holiday Edit')" :to="{ name: 'HolidayCreate',params:{id:cat.id} }" :title="$t('Edit')" class="btn btn-dark s-btn-xs"><i class="fa-solid fa-pen-to-square fa-sm"></i></router-link>
                                <button v-if="$can('Holiday Delete')" type="button" :title="$t('Delete')" @click="funDelete(cat.id)" class="btn btn-danger s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="holidays" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>

<script>
    import CumstomPagination from "../../components/CustomPagination.vue";
    import ThemeTable from "../../components/ThemeTable.vue";
    import moment from "moment";
    export default {
        components: {
            CumstomPagination,
            ThemeTable,
        },
        data() {
            return {
                format: "YYYY-MM-DD",
                moment: moment,
                holidays: {},
                form: new Form({
                    id: "",
                    title: "",
                    purpose: "",
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text:'',
                },
            };
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios
                    .get("admin-api/holidays", {
                        params: this.params,
                    })
                    .then((res) => {
                        this.holidays = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            Searching(e) {
                this.params.search_text = e.target.value;
                this.funGetData();
            },
            funDelete(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.delete("admin-api/holidays/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },

            submitData() {
                this.form
                    .post("admin-api/holidays")
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.form.reset();
                            this.$toast.success(res.data.message);
                            $("#HolidayForm").modal("hide");
                            this.funGetData();
                        } else {
                            this.$toast.warning(res.data.message);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funDay(day) {
                if (day == "Mo") {
                    return "ចន្ទ";
                } else if (day == "Tu") {
                    return "អង្គារ";
                } else if (day == "We") {
                    return "ពុធ";
                } else if (day == "Th") {
                    return "ព្រហ";
                } else if (day == "Fr") {
                    return "សុក្រ";
                } else if (day == "Sa") {
                    return "សៅរ៍";
                } else {
                    return "អាទិត្យ";
                }
            },
            funMonth(mon) {
                if (mon == "Jan") {
                    return "មករា";
                } else if (mon == "Feb") {
                    return "កុម្ភៈ";
                } else if (mon == "Mar") {
                    return "មីនា";
                } else if (mon == "Apr") {
                    return "មេសា";
                } else if (mon == "May") {
                    return "ឧសភា";
                } else if (mon == "Jun") {
                    return "មិថុនា";
                } else if (mon == "Jul") {
                    return "កក្កដា";
                } else if (mon == "Aug") {
                    return "សីហា";
                } else if (mon == "Sep") {
                    return "កញ្ញា";
                } else if (mon == "Oct") {
                    return "តុលា";
                } else if (mon == "Nov") {
                    return "វិច្ឆិកា";
                } else if (mon == "Dec") {
                    return "ធ្នូ";
                }
            },
        },
    };
</script>