<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t("Company") }}
        </span>

        <div slot="body">
            <form method="post" @submit.prevent="submitData()">
                <div class="row">
                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Code")
                            }}<sup class="text-danger">*</sup></label
                        >
                        <input
                            type="text"
                            disabled
                            class="form-control"
                            v-model="form.code"
                            :placeholder="$t('Code')"
                            :class="{ 'is-invalid': form.errors.has('code') }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('code')"
                            v-html="form.errors.get('code')"
                        ></div>
                    </div>

                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Name English")
                            }}<sup class="text-danger">*</sup></label
                        >
                        <input
                            type="text"
                            class="form-control"
                            v-model="form.name_en"
                            :placeholder="$t('Name English')"
                            :class="{
                                'is-invalid': form.errors.has('name_en'),
                            }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('name_en')"
                            v-html="form.errors.get('name_en')"
                        ></div>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Name Khmer")
                            }}<sup class="text-danger"></sup
                        ></label>
                        <input
                            type="text"
                            class="form-control"
                            v-model="form.name_kh"
                            :placeholder="$t('Name')"
                            :class="{
                                'is-invalid': form.errors.has('name_kh'),
                            }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('name_kh')"
                            v-html="form.errors.get('name_kh')"
                        ></div>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Contact Number")
                            }}<sup class="text-danger">*</sup></label
                        >
                        <input
                            type="text"
                            class="form-control"
                            v-model="form.contact_number"
                            :placeholder="$t('Contact Number')"
                            :class="{
                                'is-invalid': form.errors.has('contact_number'),
                            }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('contact_number')"
                            v-html="form.errors.get('contact_number')"
                        ></div>
                    </div>

                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Email") }}<sup class="text-danger"></sup
                        ></label>
                        <input
                            type="text"
                            class="form-control"
                            v-model="form.email"
                            :placeholder="$t('Email')"
                            :class="{ 'is-invalid': form.errors.has('email') }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('email')"
                            v-html="form.errors.get('email')"
                        ></div>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Address") }}<sup class="text-danger"></sup
                        ></label>
                        <suggestions
                            v-model="form.address"
                            :onInputChange="onCountryInputChange"
                        ></suggestions>
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('address')"
                            v-html="form.errors.get('address')"
                        ></div>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label for="" class="form-label"
                            >{{ $t("Website") }}<sup class="text-danger"></sup
                        ></label>
                        <input
                            type="text"
                            class="form-control"
                            v-model="form.website"
                            :placeholder="$t('Website')"
                            :class="{
                                'is-invalid': form.errors.has('website'),
                            }"
                        />
                        <div
                            class="valid text-danger"
                            v-if="form.errors.has('website')"
                            v-html="form.errors.get('website')"
                        ></div>
                    </div>

                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="" class="form-label">{{
                                $t("Logo")
                            }}</label>

                            <ImageCropper
                                @croped="handleLogo"
                                :modalId="'1'"
                                :aspectRatio="1"
                                :croppedImage="this.form.logo"
                            />
                            <div
                                class="valid text-danger"
                                v-if="form.errors.has('logo')"
                                v-html="form.errors.get('logo')"
                            ></div>
                        </div>
                    </div>
                </div>

                <div class="text-end">
                    <button
                        type="submit"
                        :disabled="form.busy"
                        class="btn btn-success"
                    >
                        <i class="fa-solid fa-floppy-disk"></i>
                        {{ $t("Submit") }}
                    </button>
                </div>
            </form>
        </div>
    </theme-table>
</template>

<script>
import ThemeTable from "../../components/ThemeTable.vue";
import ImageCropper from "../../components/ImageCropper.vue";
export default {
    components: {
        ThemeTable,
        ImageCropper,
    },
    data() {
        return {
            showLogo: false,
            action: false,
            form: "",
            form: new Form({
                id: "",
                code: "",
                name_en: "",
                name_kh: "",
                contact_number: "",
                email: "",
                website: "",
                address: "",
                logo: "",
            }),
        };
    },
    created() {
        this.funGetData();
    },

    methods: {
        funGetData() {
            axios.get("admin-api/company").then((res) => {
                this.form.fill(res.data);
            });
        },
        handleLogo(croppedImageUrl) {
            this.form.logo = croppedImageUrl;
        },
        submitData() {
            this.form
                .post("admin-api/company")
                .then((res) => {
                    if (res.data.status == 1) {
                        this.$toast.success(res.data.message);
                        this.funGetData();
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        async onCountryInputChange(query) {
            if (query.trim().length === 0) {
                return null;
            }
            let data = await axios.get("admin-api/address-autocomplete", {
                params: { searchText: query },
            });
            return data.data;
        },
    },
};
</script>
