<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" 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'" :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 ImageCropper from "../../components/ImageCropper.vue";
import ThemeTable from "../../components/ThemeTable.vue";
export default {
    components: {
        ImageCropper,
        ThemeTable
    },
    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>
