<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                <router-link :to="{ name: 'Holiday' }">{{
                    $t("Holiday")
                }}</router-link>
                <label class="px-1">/</label>
                <label>{{ $t("Add New") }}</label>
            </div>
        </span>

        <div slot="body">
            <div class="menu">
                <div class="row pt-2">
                    <div class="col-12 col-xxl-6 col-xl-6">
                        <div class="mb-3">
                            <label class="form-label"
                                >{{ $t("Title")
                                }}<sup class="text-danger">*</sup></label
                            >
                            <input
                                type="text"
                                class="form-control"
                                v-model="form.title"
                                :placeholder="$t('Title')"
                                :class="{
                                    'is-invalid': form.errors.has('title'),
                                }"
                            />
                            <div
                                class="valid text-danger"
                                v-if="form.errors.has('title')"
                                v-html="form.errors.get('title')"
                            ></div>
                        </div>
                    </div>
                    <div class="col-12 col-xxl-6 col-xl-6">
                        <div class="mb-3">
                            <label class="form-label"
                                >{{ $t("Date")
                                }}<sup class="text-danger">*</sup></label
                            >
                            <date-picker
                                v-model="form.date"
                                valueType="format"
                                :format="format"
                                :class="{
                                    'is-invalid': form.errors.has('date'),
                                }"
                            ></date-picker>
                            <div
                                class="text-danger"
                                v-if="form.errors.has('date')"
                                v-html="form.errors.get('date')"
                            ></div>
                        </div>
                    </div>
                    <!-- <div class="col-12 col-xxl-6 col-xl-6">
                        <div class="mb-3">
                            <label class="form-label">{{
                                $t("Weekend")
                            }}</label>
                            <date-picker
                                v-model="form.weekend"
                                valueType="format"
                                :format="format"
                                type="date"
                                multiple
                                :class="{
                                    'is-invalid': form.errors.has('weekend'),
                                }"
                            >
                            </date-picker>
                            <div
                                class="text-danger"
                                v-if="form.errors.has('weekend')"
                                v-html="form.errors.get('weekend')"
                            ></div>
                        </div>
                    </div> -->

                    <div class="col-12 col-xxl-6 col-xl-6">
                        <div class="mb-3">
                            <label class="form-label"
                                >{{ $t("Year")
                                }}<sup class="text-danger">*</sup></label
                            >
                            <date-picker
                                type="year"
                                v-model="form.year"
                                valueType="format"
                                :format="formatYear"
                                :class="{
                                    'is-invalid': form.errors.has('year'),
                                }"
                            ></date-picker>
                            <div
                                class="text-danger"
                                v-if="form.errors.has('year')"
                                v-html="form.errors.get('year')"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button
                    type="submit"
                    :disabled="form.busy"
                    class="btn btn-success"
                    @click="store"
                >
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ $t("Submit") }}
                </button>
            </div>
        </div>
    </theme-table>
</template>

<script>
import ThemeTable from "../../components/ThemeTable.vue";
import moment from "moment";
export default {
    components: {
        ThemeTable,
    },
    props: ["id"],
    data() {
        return {
            format: "YYYY-MM-DD",
            formatYear: "YYYY",
            moment: moment,
            form: new Form({
                weekend: [],
                id: "",
                title: "",
                date: "",
                year: "",
            }),
        };
    },
    created() {
        this.getHoliday();
    },
    methods: {
        getHoliday() {
            axios
                .get("admin-api/holidays/create", {
                    params: { id: this.id, is_details: 1 },
                })
                .then((res) => {
                    if (res.data.status == 1) {
                        this.form.fill(res.data.data);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        store() {
            this.form
                .post("admin-api/holidays")
                .then((res) => {
                    if (res.data.status == 1) {
                        this.$toast.success(res.data.message);
                        this.$router.push({ name: "Holiday" });
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                    this.$toast.warning(res.data.message);
                });
        },
    },
};
</script>
