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

        <div slot="body">
            <div class="menu">
                <div class="row px-3 pt-2">
                    <div class="col-6">
                        <div class="mb-3">
                            <label class="form-label">{{ $t('Name en') }}<sup class="text-danger">*</sup></label>
                            <input type="text" class="form-control" v-model="form.name_en" :placeholder="$t('Name en')" :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="mb-3">
                            <label class="form-label">{{ $t('Name km') }}<sup class="text-danger">*</sup></label>
                            <input type="text" class="form-control" v-model="form.name_km" :placeholder="$t('Name km')" :class="{ 'is-invalid': form.errors.has('name_km') }" />
                            <div class="valid text-danger" v-if="form.errors.has('name_km')" v-html="form.errors.get('name_km')"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ $t('Phone') }}<sup class="text-danger">*</sup></label>
                            <input type="text" class="form-control" v-model="form.phone" :placeholder="$t('Phone')" :class="{ 'is-invalid': form.errors.has('phone') }" />
                            <div class="valid text-danger" v-if="form.errors.has('phone')" v-html="form.errors.get('phone')"></div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <label class="form-label">{{ $t('Province') }}</label>
                            <Multiselect
                                v-model="form.province_id"
                                :placeholder="$t('Province')"
                                label="full_name_km"
                                :class="{ 'is-invalid': form.errors.has('full_name_km') }"
                                :searchable="true"
                                :options="provinces"
                                @input="getDistrict"
                            />
                            <div class="valid text-danger" v-if="form.errors.has('full_name_km')" v-html="form.errors.get('full_name_km')"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ $t('District') }}</label>
                            <Multiselect v-model="form.district_id" :placeholder="$t('District')" label="full_name_km" :class="{ 'is-invalid': form.errors.has('full_name_km') }" :searchable="true" :options="districts" @input="getCommune" />
                            <div class="valid text-danger" v-if="form.errors.has('district_id')" v-html="form.errors.get('district_id')" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ $t('Commune') }}</label>
                            <Multiselect v-model="form.commune_id" :placeholder="$t('Commune')" label="full_name_km" :class="{ 'is-invalid': form.errors.has('full_name_km') }" :searchable="true" :options="communes" @input="getVillage" />
                            <div class="valid text-danger" v-if="form.errors.has('commune_id')" v-html="form.errors.get('commune_id')" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ $t('Village') }}</label>
                            <Multiselect v-model="form.village_id" :placeholder="$t('Village')" label="full_name_km" :class="{ 'is-invalid': form.errors.has('full_name_km') }" :searchable="true" :options="villages" />
                            <div class="valid text-danger" v-if="form.errors.has('village_id')" v-html="form.errors.get('village_id')" />
                        </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'
    export default {
        components: {
            ThemeTable
        },
        props: ["id"],
        data() {
            return {
                provinces: [],
                districts: [],
                communes: [],
                villages: [],
                form: new Form({
                    id: "",
                    name_en: "",
                    name_km: "",
                    phone: "",
                    province_id: "",
                    district_id: "",
                    commune_id: "",
                    village_id: "",
                }),
            };
        },
        created() {
            this.getBranch();
        },
        methods: {
            getBranch() {
                axios
                    .get("admin-api/branches/create", {
                        params: { id: this.id, is_details: 1 },
                    })
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.form.fill(res.data.data);
                        }
                        this.getProvince();
                        this.getDistrict();
                        this.getCommune();
                        this.getVillage();
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            store() {
                this.form
                    .post("admin-api/branches")
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.$toast.success(res.data.message);
                            this.$router.push({ name: "Branch" });
                        } else {
                            this.$toast.warning(res.data.message);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                        this.$toast.warning(res.data.message);
                    });
            },
            getProvince: function () {
                axios.get("/admin-api/get-provinces").then(
                    function (response) {
                        this.provinces = response.data;
                    }.bind(this)
                );
            }, // Load Province
            getDistrict: function () {
                axios
                    .get("/admin-api/get-districts", {
                        params: { province_id: this.form.province_id },
                    })
                    .then(
                        function (response) {
                            this.districts = response.data;
                        }.bind(this)
                    );
            },
            getCommune: function () {
                axios
                    .get("/admin-api/get-communes", {
                        params: { district_id: this.form.district_id },
                    })
                    .then(
                        function (response) {
                            this.communes = response.data;
                        }.bind(this)
                    );
            },
            getVillage: function () {
                axios
                    .get("/admin-api/get-villages", {
                        params: { commune_id: this.form.commune_id },
                    })
                    .then(
                        function (response) {
                            this.villages = response.data;
                        }.bind(this)
                    );
            },
        },
    };
</script>
