<template>
    <div class="container px-4 my-3">
        <h2 class="fw-bolder text-center">My Profile</h2>
        <form class="profile-form" enctype="multipart/form-data">
            <div class="row">
                <div class="col-sm-3 text-center">
                    <img :src="profpics" class="rounded-circle" alt="Profile picture" style="width:150px;height:150px">
                </div>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-6 my-2">
                            <label class="fw-bold">Name</label>
                            <input type="text" id="firstname" v-model="firstName" class="form-control"
                                placeholder="Nama depan" required>
                        </div>
                        <div class="col-sm-6 my-2">
                            <label class="fw-bold">Username</label>
                            <input type="text" id="username" v-model="username" class="form-control" placeholder="Username"
                                required>
                        </div>
                    </div>
                    <div class="row my-2">
                        <div class="col-sm-12">
                            <label class="fw-bold">E-mail</label>
                            <input type="text" id="email" v-model="email" class="form-control" placeholder="Email" required>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import api from '@/api'
import { isUserLoggedIn } from '@/utils/token'
import ProfileSidebar from '../../components/ProfileSidebar.vue';
import profpics from '@/assets/image/profpics.png';


export default {
    data() {
        return {
            firstName: "",
            lastName: "",
            username: "",
            email: "",
            phone: "",
            profilePicture: "",
            isLoggedIn: false,
            profpics: profpics
        };
    },
    mounted() {
        this.isLoggedIn = isUserLoggedIn();
        if (this.isLoggedIn) {
            this.getUserData();
        }
    },
    methods: {
        getUserData() {
            api.get("/profiles/account/")
                .then(response => {
                    this.firstName = response.data.user.first_name;
                    this.lastName = response.data.user.last_name;
                    this.username = response.data.user.username;
                    this.phone = response.data.phone;
                    this.email = response.data.user.email;
                    this.profilePicture = response.data.profile_picture;
                })
                .catch(error => {
                    console.error(error);
                });
        },
    },
    components: { ProfileSidebar }
}
</script>