<script setup>
import {ref,reactive,computed, onMounted} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
let user = computed(()=>store.state.user)
let country = computed(()=>store.state.country)
let setting = computed(() => store.state.settings)

let ProfilePictureform = reactive({
    'image':'',
    'userId':user.value.id,
})
let form = reactive({
    'address':user.value.address,
    'name':user.value.name,
    'phone':user.value.phone,
    'email':user.value.email,
    'tokenId':localStorage.getItem('HolesaleBagauthToken').split('|')[0],
})

let AuthTokenId = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
const User = async()=>{
    if(user.value.length == 0){
        store.dispatch("Loader",true)
        axios.post('/api/get-address/'+AuthTokenId).then(response =>{
            store.dispatch("Loader",false)
            let data = response.data
            store.dispatch('getCountry',data)
            store.dispatch('UserFirst', data.user)
            form.name = data.user.name
            ProfilePictureform.userId = data.user.id
            form.phone = data.user.phone
            form.email = data.user.email
            form.address = data.user.address
        })
    }
}

onMounted(async () =>{
   User()
   window.scrollTo(0, 0);
   store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
})
let changeAddress = ref(true)
const ChangeAddress = async()=>{
    if(changeAddress.value == true){
        changeAddress.value = false
        form.detailAddress = ''
    }else{
        changeAddress.value = true
    }
}
const UpdateUser = async()=>{
    store.dispatch("Loader",true)
    axios.post('/api/user-update', form).then(response =>{
        store.dispatch("Loader",false)
        let userF = response.data.user
        store.dispatch('UserFirst', userF)
        changeAddress.value = true
    })
    
}
const GenderNew = async(event)=>{
    form.gender = event.target.value
}
let Division = ref([])
let District = ref([])
let Upazila = ref([])
let DetailAddress = ref([])
const Country = async(event)=>{
    Division.value = []
    District.value = []
    Upazila.value = []
    if(event.target.value != ''){
        country.value.map((country)=>{
        if(country.country_id == event.target.value){
            form.country = country.name
        }
    })
    await axios.post(setting.value.frontend_img_url+'/api/country-to-division/'+event.target.value).then(response => {
        Division.value = response.data.division
    })
    }
}
const division = async(event)=>{
    District.value = []
    Upazila.value = []
    if(event.target.value != ''){
        Division.value.map((division)=>{
            if(division.division_id == event.target.value){
                form.division = division.name
            }
        })
        await axios.post(setting.value.frontend_img_url+'/api/division-to-district/'+event.target.value).then(response => {
            District.value = response.data.district
        })
    }
}
const district = async(event)=>{
    Upazila.value = []
    if(event.target.value != ''){
        District.value.map((district)=>{
        if(district.district_id == event.target.value){
            form.district = district.name
        }
    })
    await axios.post(setting.value.frontend_img_url+'/api/district-to-upazila/'+event.target.value).then(response => {
        Upazila.value = response.data.upazila
    })
    }
}
const upazila = async(event)=>{
    Upazila.value.map((upazila)=>{
        if(upazila.upazila_id == event.target.value){
            form.upazila = upazila.name
        }
    })
}

const changePhoto = async(event)=>{
    let file = event.target.files[0];
    let reader = new FileReader();
    let image = ref()
    reader.onload = (e)=>{
        ProfilePictureform.image = e.target.result
        axios.post(setting.value.frontend_img_url+'/api/update-profile-picture', ProfilePictureform).then(response => {
        })
    }
    reader.readAsDataURL(file);
}
</script>
<template>
    <main class="main">
        <div class="mt-4"></div>
        <div class="page-content">
            <div class="payment-history">
                <div class="container-fluid">
                    <h1 class="page-title">Your Profile</h1>
                    <div class="profile-info">
                        <div class="form-group profile">
                            <img v-if="!user.image" class="attr" id="img-output" :src="'/image/default.jpg'" style="width: 150px; height: 150px;">
                            <img v-if="user.image" class="attr" id="img-output" :src="setting.frontend_img_url+'/storage/image/profile/'+user.image" style="width: 150px; height: 150px;">
                            <label class="profile-picture-label" for="attrimg"></label>
                            <input type="file" style="display:none"  @change="changePhoto" class="form-control hidden" id="attrimg" onchange="document.getElementById('img-output').src = window.URL.createObjectURL(this.files[0])" placeholder="Price">
                        </div>
                        <form @submit.prevent="UpdateUser">
                            <input v-model="form.name" class="form-control" type="text" placeholder="Your Name">
                            <input v-model="form.email" class="form-control" type="email" placeholder="Email Address">
                            <input style="font-size: 20px; font-weight: 700;" v-model="form.phone" disabled class="form-control" type="number" placeholder="Your Phone Number">
                            <!-- <select @change="GenderNew($event)" class="form-control">
                                <option value="">-- Select Your Gender --</option>
                                <option value="male" :selected="form.gender == 'male'">Male</option>
                                <option value="female" :selected="form.gender == 'female'">Female</option>
                                <option value="others" :selected="form.gender == 'others'">Others</option>
                            </select>
                            <input class="form-control" v-model="form.dateofBirth" type="text" placeholder="Date of Birth (YYYY-MM-DD)"> -->
                            <div class="current-address">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <label>Address</label>
                                        <input v-model="form.address" type="text" class="form-control">
                                    </div><!-- End .col-sm-12 -->
                                </div><!-- End .row -->
                            </div>
                            <div class="more text-center mt-2"><button>Update</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- End .page-content -->
    </main><!-- End .main -->
</template>
<style scoped>
.form-group.profile{
    position: relative;
}
.profile-picture-label{
    position : absolute;
    top:0;
    font-size: 12px;
    cursor: pointer;
    height:100%;
    width: 150px;
    border-radius: 50%;
    transition: 0.6s;
    opacity: 0.4;
}
img{
    border-radius: 50%;
    border: 3px solid #000;
}
.profile-picture-label:hover{
    background: #ccc;

}
.current-address{
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}
.current-address .btn{
    border-radius: 10px;
    cursor:pointer;
    border: 1px solid v-bind(setting.color);
}
.current-address .btn:hover{
    background: v-bind(setting.color);
    color: #fff;
}
.user-address p{
    font-size: 16px;

}
input[type="text"],input[type="number"],input[type="email"]{
    font-size: 15px;
}
h1.page-title{
    font-size: 25px;
    margin-bottom: 0;
    padding-bottom:0;
}
div.more button{
    background: v-bind(setting.color);
    color: #fff;
    padding: 5px 30px;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    h1.page-title{
        text-align:center;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
    }
}
</style>
