<template>
    <section class="login-image">
        <div class="container-fluid">
            <div class="row custom-row" style="padding-top: 20px;">
                <div class="col-10 col-md-6 col-lg-6 custom-login neon-text text-center g-pa-20">
                    <h4 class="g-mb-50">Sign Up</h4>
                    <div class="text-left">
                        <form v-on:submit.prevent="registForm" action="" method="post">
                            <div class="form-group g-mb-20">
                                <label for="name">Username</label>
                                <input type="text" class="custom-form" id="name" placeholder="Username" v-model="user.name">
                                <div class="error" v-if="errors.name">{{ errors.name[0] }}</div>
                            </div>
                            <div class="form-group g-mb-20">
                                <label for="email">Email</label>
                                <input type="text" class="custom-form" id="email" placeholder="Email" v-model="user.email">
                                <div v-if="submitted && !$v.user.email.required" class="invalid-feedback">Username is required</div>
                                <div class="error" v-if="errors.email">{{ errors.email[0] }}</div>
                            </div>
                            <div class="form-group g-mb-20">
                                <label for="password">Password</label>
                                <input type="password" class="custom-form" id="password" placeholder="Password" v-model="user.password">
                                <div class="error" v-if="errors.password">{{ errors.password[0] }}</div>
                            </div>
                            <div class="form-group g-mb-20">
                                <label for="c_password">Confirm Password</label>
                                <input type="password" class="custom-form" id="c_password" placeholder="Confirm Password" v-model="user.c_password">
                                <div class="error" v-if="errors.c_password">{{ errors.c_password[0] }}</div>
                            </div>
                            <div class="form-group g-mb-50">
                                <label for="role">Role</label>
                                <select class="form-select custom-form g-color-white" aria-label="Default select example" v-model="user.role" required="required" style="border-radius: 20px;">
                                    <!-- <option selected>Pilih Role</option> -->
                                    <option class="g-color-black" v-for="(role, index) in role" :key="index">{{ role.name }}</option>
                                </select>
                            </div>
                            <div class="d-flex justify-content-center g-mb-10">
                                <button id="submit" type="submit" class="custom-button">Register</button>
                            </div>
                            <div class="text-center">
                                <div>Already have an account ? <router-link to="/login" class="text-decoration-none g-color-white">Login</router-link></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style>
.error {
    color: #ff0000;
    font-weight: 600;
}

.login-image {
    background-image: url("../assets/images/bg/bg4.jpg");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.custom-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-button {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    box-shadow: 0px 0px 5px 1px #fff;
    padding: 0.2rem 4rem;
    font-size: 1.1rem;
    border-radius: 10px;
}

.custom-login {
    border: 1px solid #fff;
    box-shadow: 0px 0px 40px 20px #fff;
    border-radius: 20px;
    background-color: #000;
    opacity: 0.8;
}

.neon-text {
    color: #fff;
    text-shadow:
        0 0 7px #000,
        0 0 10px #000,
        0 0 21px #000,
        0 0 42px #0fa,
        0 0 82px #0fa,
        0 0 92px #0fa,
        0 0 102px #0fa,
        0 0 151px #0fa;
}

.custom-form {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    margin-top: 10px;
    background-color: transparent !important;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 5px 1px #fff;
}

::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}
</style>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'

export default {
    name: 'RegistFormAxios',
    data(){
        return{
            user: {
                name: '',
                email: '',
                password: '',
                c_password: '',
                role: ''
            },
            errors: {},
        }
    },
    setup() {
        //reactive state
        let role = ref([]);

        onMounted(() => {
            //get data from api endpoint
            axios.get('https://werp-api.pt-gti.co.id/api/role')
            .then((response) => {
                role.value = response.data
                // console.log(response.data)
            }).catch((err) => {
                console.log(err.response)
            });
        });

        return {
            role
        }
    },
    methods:{
        registForm(){
            axios.post('https://werp-api.pt-gti.co.id/api/register', this.user)
                .then((response) => {
                    location.href = "/login"
                    // console.log(response.data)
                })
                .catch((error) => {
                    this.errors = error.response.data.error
                    // console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        }
    }
}
</script>