<template>
	<v-container>
		<v-card class="pa-6">
			<v-row>
				<v-col cols="12">
					<v-row>
						<v-col cols="6">
							<div class="headline font-weight-bold pa-2">Profile</div>
						</v-col>
						<v-col cols="6">
							<v-btn
								color="warning" outlined
								class="text-capitalize float-right"
								@click="$router.push('/my/profile')"
							>
								Back
							</v-btn>
						</v-col>
					</v-row>
					<v-divider class="px-1"></v-divider>
					<v-col cols="12" md="6">
						<v-row dense>	
							<v-col cols="12" md="12" class="pb-2 pt-4">
								<v-text-field
									v-model="form.full_name"
									label="Full Name" placeholder="Full Name"
									outlined dense
									:error-messages="errors.full_name"
								></v-text-field>
							</v-col>
							<v-col cols="12" md="12" class="pb-2 pt-4">
								<v-select
									v-model="form.gender"
									:items="genders"
									label="Gender"
									dense
								></v-select>
							</v-col>
							<v-col 
								v-if="isPartner" 
								cols="12" 
								md="12"
								class="pb-2 pt-4"
							>
								<v-divider></v-divider>
							</v-col>
							<v-col 
								v-if="isPartner"
								cols="12" 
								md="12" 
								class="pb-2 pt-4" 
							>
								<v-text-field
									v-model="form.company_name"
									label="Company Name" placeholder="Company Name"
									outlined dense
									:error-messages="errors.company_name"
								></v-text-field>
							</v-col>
							<v-col 
								v-if="isPartner"
								cols="12" 
								md="12" 
								class="pb-2 pt-4" 
							>
								<v-text-field
									v-model="form.business_reg_num"
									label="Business Registration Number" placeholder="Business Registration Number"
									outlined dense
									:error-messages="errors.business_reg_num"
								></v-text-field>
							</v-col>
							<v-col cols="12" md="12" class="pb-2 pt-4">
								<v-divider></v-divider>
							</v-col>
							<v-col cols="12" md="12" class="pb-2 pt-4">
								<v-text-field
									v-model="form.address"
									label="Address" placeholder="Address"
									outlined dense
									:error-messages="errors.address"
								></v-text-field>
							</v-col>
							<v-col cols="6" md="6" class="pb-2 pt-4">
								<v-text-field
									v-model="form.city"
									label="City" placeholder="City"
									outlined dense
									:error-messages="errors.city"
								></v-text-field>
							</v-col>
							<v-col cols="6" md="6" class="pb-2 pt-4">
								<v-text-field
									v-model="form.postcode"
									label="Postcode" placeholder="Postcode"
									outlined dense
									:error-messages="errors.postcode"
								></v-text-field>
							</v-col>
							<v-col cols="12" md="12" class="pb-2 pt-4">
								<v-autocomplete
									v-model="form.state"
									label="State" placeholder="State"
									outlined dense
									:items="state_list"
									item-value="name" item-text="name"
									:error-messages="errors.state"
								></v-autocomplete>
							</v-col>
							<v-col cols="12" md="12" class="pb-2">
								<v-text-field
									v-model="form.mobile_num"
									label="Mobile Number" placeholder="Mobile Number"
									outlined dense
									:error-messages="errors.mobile_num"
								></v-text-field>
							</v-col>
							<v-col cols="12">
								<v-btn
									color="info"
									class="text-capitalize"
									:loading="submit_loading"
									@click="updateAuthProfile()"
								>
									Update Profile
								</v-btn>
							</v-col>
						</v-row>
					</v-col>
				</v-col>
				<v-col cols="12">
					<div class="headline font-weight-bold pa-2">Change Password</div>
					<v-divider class="px-1"></v-divider>
					<div class="caption grey--text pa-1">Changing your account password and logout all login device.</div>
					<v-col cols="12" md="6">
						<v-btn
							color="error" outlined
							class="text-capitalize"
							@click="changePassword()"
						>
							Change Password
						</v-btn>
					</v-col>
				</v-col>
			</v-row>
		</v-card>

		<v-dialog v-model="changePassword_dialog" max-width="550px" persistent>
			<ChangePasswordForm :visible.sync="changePassword_dialog"></ChangePasswordForm>
		</v-dialog>
	</v-container>
</template>

<script>
import ChangePasswordForm from './ChangePasswordForm'
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
import { resourceMixin } from "@/js/mixins/ResourceMixin"
export default{
	components:{
		ChangePasswordForm
	},
	mixins: [ 
		errorHandlerMixin,
		resourceMixin,
	],
	data(){
		return {
			form: {},
			errors: {},
			changePassword_dialog : false,
			submit_loading: false,
			genders: [],
			state_list: []
		}
	},
	computed:{
		isPartner()
		{
			return this.$auth.user().role_id == 2
		}
	},
	created(){
		
		this.init()
	},
	methods:{
		init()
		{
			this.form = {
				id: this.$auth.user().id,
				full_name: this.$auth.user().full_name,
				gender: this.$auth.user().gender,
				address: this.$auth.user().address,
				city: this.$auth.user().city,
				state: this.$auth.user().state,
				postcode: this.$auth.user().postcode,
				company_name: this.$auth.user().company_name,
				business_reg_num: this.$auth.user().business_reg_num,
				mobile_num: this.$auth.user().mobile_num,
			}
			this.getGenderTypes()
			this.getStateList()
		},
		updateAuthProfile(){
			this.submit_loading = true
			this.errors = {}
			let payload = this.form
			this.$api.updateAuthProfile(payload).then((res)=>{
				this.$toast.success(res.data.message)
				this.$auth.fetch()
			}).catch((err) => {
				this.errors = this.errorHandler_(err,["full_name",'mobile_num'])
			}).finally(()=>{
				this.submit_loading = false
			})
		},
		changePassword(){
			this.changePassword_dialog = true
		},
		getGenderTypes(){
			this.$api.getGenderTypes().then(async (res)=>{
				let result = res.data.result
				this.genders = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getStateList()
		{
			this.$api.getStateList().then(async (res)=>{
				let { result } = res.data
				this.state_list = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		}
	}
}
</script>