<template>
    <div class="login-container">
        <div class="container inner flex-center">
            <div class="box-container">
                <form class="register-form" method="POST"> 
                    <div class="form-input">
                        <label for="Name">Name</label>
                        <input type="text" name="name" id="Name" v-model="name">
                    </div>
                    <div class="form-input">
                        <label for="email">Email</label>
                        <input type="text" name="email" id="Email" v-model="email">
                    </div>
                    <div class="form-input">
                        <label for="Password">Password</label>
                        <input type="password" name="password" id="Password" v-model="password">
                    </div>
                    <div class="form-input">
                        <label for="ConfirmPassword">Confirm Password</label>
                        <input type="password" name="confirm_password" id="ConfirmPassword" v-model="confirm_password">
                    </div>
                    <div class="form-input">
                        <label>Date of Birth</label>
                        <div class="row"> 
                            <select class="w-33 bluefire-selector" v-model="day">
                                <option value="0">Day</option>
                                <option v-for="n in 31" :key="n">{{ n }}</option>
                            </select>
                            <select class="w-33 bluefire-selector" v-model="month">
                                <option value="0">Month</option>
                                <option v-for="n in 12" :key="n">{{ n }}</option>
                            </select>
                            <select class="w-33 bluefire-selector" v-model="year">
                                <option value="0">Year</option>
                                <option v-for="(n,i) in 95" :key="n">{{ 2020-i }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-input">
                        <label>Gender</label>
                        <div class="row">
                            <input type="radio" name="gender" id="Male" value="Male" v-model="gender"> &nbsp;Male
                            <input type="radio" name="gender" id="Female" value="Female" v-model="gender">&nbsp;Female
                        </div>
                    </div>
                    <div class="form-input">
                        <label for="Address">Address</label>
                        <textarea class="noresize" id="Address" v-model="address" />
                    </div>
                    <div class="form-input">
                        <label for="PhoneNumber">Phone Number</label>
                        <input type="text" name="phone_number" id="PhoneNumber" v-model="phone_number">
                    </div>
                    <div class="form-input flex-center">
                        <button class="button w-50 medium" @click="submitRegister">Register</button>
                    </div>
                </form>
            </div>

        </div>
    </div>    
</template>
<script>
import API from "../lib/API";

export default {
    data() {
        return {
            name: "",
            email: "",
            password: "",
            confirm_password: "",
            day: 0,
            month: 0,
            year: 0,
            gender: "",
            address: "",
            phone_number: "",
        }
    },
    mounted() {
        if(this.$store.state.apiKey != 0) {
            this.$router.push("/");
        }
    },
    methods: {
        submitRegister(e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append("password",this.password);
            formData.append("name",this.name);
            formData.append("DOB",this.year+"-"+this.month+"-"+this.day);
            formData.append("gender",this.gender);
            formData.append("address",this.address);
            formData.append("phone",this.phone_number);
            formData.append("email",this.email);
            API.post("/insertUser",formData,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(() => {
                this.$router.push({ name: 'login'});
            });
        },
    }
}
</script>
<style>

</style>