<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 class="row">
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="" class="form-label">{{ $t("QR1") }}</label>
                                    <ImageCropper
                                        @croped="handleLogo"
                                        :modalId="'2'"
                                        :croppedImage="this.form.image"
                                    />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="" class="form-label">{{ $t("QR2") }}</label>
                                    <ImageCropper
                                        @croped="handleLogo1"
                                        :modalId="'3'"
                                        :croppedImage="this.form.image1"
                                    />
                                </div>
                            </div>
                        </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";
import ImageCropper from "../../components/ImageCropper.vue";
export default {
    components: {
        ThemeTable,
        ImageCropper,
    },
    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: "",
                image: "",
                image1: "",
            }),
        };
    },
    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);
                });
        },
        handleLogo(croppedImageUrl) {
            this.form.image = croppedImageUrl;
        },
        handleLogo1(croppedImageUrl) {
            this.form.image1 = croppedImageUrl;
        },
        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)
                );
        },
        toggleShow() {
            this.showLogo = !this.showLogo;
        },
        cropClient(imgDataUrl) {
            this.form.image = imgDataUrl;
        },
        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>
