<template>
    <LoadingComponent :props="loading" />
    <SmSidebarModalCreateComponent :props="addButton" @click="addReset" />

    <div id="sidebar" class="drawer">
        <div class="drawer-header">
            <h3 class="drawer-title">{{ $t("menu.delivery_days") }}</h3>
            <button class="fa-solid fa-xmark close-btn" @click="reset"></button>
        </div>
        <div class="drawer-body">
            <form @submit.prevent="save">
                <div class="form-row">
                    <div class="form-col-12 sm:form-col-6">
                        <label for="number_of_days" class="db-field-title required">{{ $t("label.number_of_days") }}</label>
                            <input v-model="props.form.number_of_days" v-bind:class="errors.number_of_days ? 'invalid' : ''" type="text"
                                id="number_of_days" class="db-field-control" />
                            <small class="db-field-alert" v-if="errors.number_of_days">{{ errors.number_of_days[0] }}</small>
                        </div>

                    <div class="form-col-12 sm:form-col-6">
                        <label class="db-field-title">{{ $t("label.status") }}</label>
                        <div class="db-field-radio-group">
                            <div class="db-field-radio">
                                <div class="custom-radio">
                                    <input type="radio" v-model="props.form.status" id="active"
                                        :value="enums.statusEnum.ACTIVE" class="custom-radio-field">
                                    <span class="custom-radio-span"></span>
                                </div>
                                <label for="active" class="db-field-label">{{ $t('label.active') }}</label>
                            </div>
                            <div class="db-field-radio">
                                <div class="custom-radio">
                                    <input type="radio" class="custom-radio-field" v-model="props.form.status"
                                        id="inactive" :value="enums.statusEnum.INACTIVE">
                                    <span class="custom-radio-span"></span>
                                </div>
                                <label for="inactive" class="db-field-label">{{ $t('label.inactive') }}</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="flex flex-wrap gap-3 mt-4">
                            <button type="submit" class="db-btn py-2 text-white bg-primary">
                                <i class="lab lab-save"></i>
                                <span>{{ $t("label.save") }}</span>
                            </button>
                            <button type="button" class="modal-btn-outline modal-close" @click="reset">
                                <i class="lab lab-close"></i>
                                <span>{{ $t("button.close") }}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script>

import SmSidebarModalCreateComponent from "../../components/buttons/SmSidebarModalCreateComponent.vue";
import LoadingComponent from "../../components/LoadingComponent.vue";
import statusEnum from "../../../../enums/modules/statusEnum";
import alertService from "../../../../services/alertService";
import appService from "../../../../services/appService";
import { useDeliveryDaysStore } from "../../../../stores/deliveryDays";

export default {
    name: "DeliveryDaysCreateComponent",
    components: { SmSidebarModalCreateComponent, LoadingComponent },
    props: ["props"],
    data() {
        return {
            loading: {
                isActive: false
            },
            enums: {
                statusEnum: statusEnum,
                statusEnumArray: {
                    [statusEnum.ACTIVE]: this.$t("label.active"),
                    [statusEnum.INACTIVE]: this.$t("label.inactive")
                },
            },
            errors: {},
            deliveryDaysStore: useDeliveryDaysStore(),
        }
    },
    computed: {
        addButton: function () {
            return { title: this.$t('button.add_delivery_days') };
        }
    },
    methods: {
        reset: function () {
            appService.sideDrawerHide();
            this.deliveryDaysStore.reset().then().catch();
            this.errors = {};
            this.$props.props.form = {
                number_of_days: "",
                status: statusEnum.ACTIVE,
            };
        },
        addReset: function () {
            this.deliveryDaysStore.reset().then().catch();
            this.errors = {};
            this.$props.props.form = {
                number_of_days: "",
                status: statusEnum.ACTIVE,
            };
        },
        save: function () {
            try {
                const tempId = this.deliveryDaysStore.temp.temp_id;
                this.loading.isActive = true;
                this.deliveryDaysStore.save({
                    form: this.props.form,
                    search: this.props.search
                }).then((res) => {
                    appService.sideDrawerHide();
                    this.loading.isActive = false;                                
                    alertService.successFlip((tempId === null ? 0 : 1), this.$t('menu.delivery_days'));
                    this.props.form = {
                        number_of_days: "",
                        status: statusEnum.ACTIVE,
                    };
                    this.errors = {};
                }).catch((err) => {
                    this.loading.isActive = false;
                    this.errors = {};
                    if (err.response && err.response.data && err.response.data.errors) {
                        this.errors = err.response.data.errors;
                    } else {
                        alertService.error(err.response.data.message);
                    }
                })
            } catch (err) {
                this.loading.isActive = false;
                alertService.error(err)
            }
        }
    },
};
</script>
