<template>
    <LoadingComponent :props="loading" />

    <div id="company" class="db-card db-tab-div active">
        <div class="db-card-header">
            <h3 class="db-card-title">{{ $t("menu.license") }}</h3>
        </div>
        <div class="db-card-body">
            <form @submit.prevent="save">
                <div class="form-row">
                    <div class="form-col-12 sm:form-col-6">
                        <label for="license_key" class="db-field-title required">{{ $t("label.license_key") }}</label>
                        <input v-model="form.license_key" v-bind:class="errors.license_key ? 'invalid' : ''" type="text"
                            id="license_key" class="db-field-control" />
                        <small class="db-field-alert" v-if="errors.license_key">{{ errors.license_key[0] }}</small>
                    </div>
                    <div class="form-col-12">
                        <button type="submit" class="db-btn text-white bg-primary">
                            <i class="lab lab-save"></i>
                            <span>{{ $t("button.save") }}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import LoadingComponent from "../../components/LoadingComponent.vue";
import alertService from "../../../../services/alertService";
import { useLicenseStore } from "../../../../stores/license";

export default {
    name: "LicenseComponent",
    components: { LoadingComponent },
    data() {
        return {
            loading: {
                isActive: false,
            },
            form: {
                license_key: "",
            },
            errors: {},
            LicenseStore: useLicenseStore(),
        };
    },
    mounted() {
        this.loadInfo();
    },
    methods: {
        loadInfo: async function () {
            try {
                this.loading.isActive = true;
                await this.LicenseStore.fetchLists()
                    .then((res) => {
                        this.form = {
                            license_key: res.data.data.license_key,
                        };
                        this.loading.isActive = false;
                    })
                    .catch((err) => {
                        this.loading.isActive = false;
                    });
            } catch (err) {
                this.loading.isActive = false;
                alertService.error(err);
            }
        },
        save: function () {
            try {
                this.loading.isActive = true;
                this.LicenseStore.save(this.form).then((res) => {
                    this.loading.isActive = false;
                    alertService.successFlip(
                        res.config.method === "put" ?? 0,
                        this.$t("menu.license")
                    );
                    this.errors = {};
                }).catch((err) => {
                    this.loading.isActive = false;
                    this.errors = err.response.data.errors;
                });
            } catch (err) {
                this.loading.isActive = false;
                alertService.error(err);
            }
        },
    },
};
</script>
