<template>


    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                {{ $t('My Profile') }}
            </div>
        </span>

        <div slot="body">
            <form method="post" @submit.prevent="submitData()">
                <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('Name') }}<sup
                                    class="text-danger">*</sup></label>
                            <input type="text" class="form-control" v-model="form.name"
                                :placeholder="$t('Name')"
                                :class="{ 'is-invalid': form.errors.has('name') }">
                            <div class="valid text-danger" v-if="form.errors.has('name')"
                                v-html="form.errors.get('name')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('Nickname') }}</label>
                            <input type="text" class="form-control" v-model="form.nickname"
                                :placeholder="$t('Nickname')"
                                :class="{ 'is-invalid': form.errors.has('nickname') }">
                            <div class="valid text-danger" v-if="form.errors.has('nickname')"
                                v-html="form.errors.get('nickname')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('Gender') }}<sup
                                    class="text-danger">*</sup></label>
                            <Multiselect v-model="form.gender" placeholder="Gender"
                                trackBy="gender" value="id" label="gender"
                                :class="{ 'is-invalid': form.errors.has('gender') }"
                                :searchable="true"
                                :options="[{ value: 1, gender: 'Male' }, { value: 2, gender: 'Female' }]" />
                            <div class="valid text-danger" v-if="form.errors.has('gender')"
                                v-html="form.errors.get('gender')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('DateOfBirth') }}<sup
                                    class="text-danger"></sup></label>
                            <date-picker v-model="form.end_date" type="date" valueType="format"
                                format="YYYY-MM-DD"
                                :input-class="form.errors.has('end_date') ? 'form-control is-invalid' : 'form-control'">
                            </date-picker>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <label 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 class="form-label">{{ $t('Contact Number') }}</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 class="form-label">{{ $t('Old Password') }}<sup
                                    class="text-danger">*</sup></label>
                            <input type="password" class="form-control" v-model="form.password"
                                :placeholder="$t('Password')"
                                :class="{ 'is-invalid': form.errors.has('password') }">
                            <div class="valid text-danger" v-if="form.errors.has('password')"
                                v-html="form.errors.get('password')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('New Password') }}<sup
                                    class="text-danger">*</sup></label>
                            <input type="password" class="form-control"
                                v-model="form.new_password" :placeholder="$t('Password')"
                                :class="{ 'is-invalid': form.errors.has('password') }">
                            <div class="valid text-danger" v-if="form.errors.has('password')"
                                v-html="form.errors.get('password')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('Confirm Password') }}<sup
                                    class="text-danger">*</sup></label>
                            <input type="password" class="form-control"
                                v-model="form.confirm_password"
                                :placeholder="$t('Confirm Password')"
                                :class="{ 'is-invalid': form.errors.has('confirm_password') }">
                            <div class="valid text-danger"
                                v-if="form.errors.has('confirm_password')"
                                v-html="form.errors.get('confirm_password')">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">{{ $t('Address') }}</label>
                            <suggestions v-model="form.address"
                                :onInputChange="onCountryInputChange"></suggestions>
                        </div>
                    </div>
                <button type="submit" :disabled="form.busy"
                    class="btn btn-success  mb-2 float-end mt-1">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ $t('Submit') }}
                </button>
            </form>
        </div>
    </theme-table>

</template>

<script>

import ThemeTable from "../../../components/ThemeTable.vue";
export default {
    components: {
        ThemeTable
    },
    data() {
        return {
            checked: 'logout',
            form: "",
            form: new Form({
                id: "",
                type: "",
                name: "",
                nickname: "",
                gender: "",
                dob: "",
                pos_id: "",
                contact_number: "",
                password: "",
                new_password: "",
                confirm_password: "",
                role_id: "",
                address: "",
                email: "",
            }),
        }
    },
    created() {
        this.funUserInfo();
    },

    methods: {
        funUserInfo() {
            axios.get("system/get-user").then((res) => {
                this.form.fill(res.data.user);
            });
        },
        submitData() {
            this.form.post("system/update-user-profile/" + this.form.id).then((res) => {
                if (res.data.status == 1) {
                    this.$toast.success(res.data.message);
                    this.funUserInfo();
                } 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>
