<template>

    <div  v-if="isLoggedIn" class="column">
        <section class="section">
            <h1 class="title">Edit User</h1>
            <div class="columns is-centered">
                <div class="column is-half">
                    <form @submit.prevent>
                        <div class="field">
                            <label for="name" class="label">Username</label>
                            <div class="control">
                                <input type="text" v-model="user.username" class="input" required>
                            </div>
                        </div>
                        <div class="field">
                            <label for="role" class="label">Role</label>
                            <div class="control">
                                <div class="select">
                                    <select v-model="user.role_id">
                                        <option v-for="role in roles" :value="role.id">
                                            {{ role.name | capitalize }}
                                        </option>
                                    </select>

                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <button class="button is-primary" @click="open_reset_password_modal(user.id)">Reset Password</button>
                        </div>
                        <div class="field">
                            <label for="name" class="label">Email</label>
                            <div class="control">
                                <input type="email" v-model="user.email" class="input" required>
                            </div>
                        </div>
                        <div class="field">
                            <label for="name" class="label">Phone Number</label>
                            <div class="control">
                                <input type="text" v-model="user.phone_number" class="input" required>
                            </div>
                        </div>
                        <div class="field is-grouped">
                            <p class="control">
                                <button class="button is-primary" :class="{ 'is-loading': isLoading }" @click="updateUser"> Update </button>
                            </p>
                            <p class="control">
                                <button class="button is-light" @click.prevent="cancel" :disabled="isLoading"> Cancel </button>
                            </p>
                        </div>
                        <div class="field">
                            <p class="help is-danger" v-if="errors">{{errors}}</p>
                        </div>
                    </form>
                </div>
            </div>
        <resetPassword-modal
            @cancel = "close_reset_password_modal"
            @confirm = "resetPassword"
            action = 'is-info'
            :data = "modal_data"
            :isActive = "is_reset_modal_active"
        />
        </section>
    </div>

</template>

<script>
export default {
    name: 'edit',
    components:{
      'resetPasswordModal': () => import('@/views/components/modals/resetPassword'),
    },
    data () {
        return {
            is_reset_modal_active: false,
            modal_data: null,
            errors:'',
            isLoading: false,
            options: [
                { text: 'Admin', value: 1},
                { text: 'Supervisor', value: 2},
                { text: 'Sales Admin', value: 3},
                { text: 'Sales', value: 4},
            ],
            user: {
                role_id: 1,
                username: '',
                email: '',
                phone_number: '',
            },
        }
    },
    methods: {
        cancel:function(){
            this.$router.push({ name: 'dashboard' })
        },
        validate: function(){
            if (this.user.password != this.user.password_confirmation){
                console.log("not same")
            }
        },
        resetPassword: function(){
          let id = this.$route.params.id
          this.axios({
            methods: 'PUT',
            url: process.env.API_URL + 'users/reset/'+id,
            headers:{
              'Authorization': localStorage.getItem('token')
               // 'Authorization': this.$store.getters.token
            },
            data: {
                user: data
            }
          })
          .then(response => {
            console.log(response)
            console.log("update success")
            this.$router.push({ name: 'dashboard' })
          })
          .catch(error => {
            this.isLoading = false;
            this.errors = error.response.data.errors
            console.log(error);
            console.log("update not success")
          })
          this.close_reset_password_modal()
        },
        open_reset_password_modal: function(data){
          this.modal_data = data
          this.is_reset_modal_active = true
        },
        close_reset_password_modal: function(){
          this.is_reset_modal_active = false
        },
        updateUser: function() {
          this.isLoading = true;
          let data = this.user
          console.log(data)
          let id = this.$route.params.id
          this.axios({
            method: 'PUT',
            url: process.env.API_URL + 'users/'+id,
            headers:{
              'Authorization': localStorage.getItem('token')
               // 'Authorization': this.$store.getters.token
            },
            data: {
                user: data
            }
          })
          .then(response => {
            console.log(response)
            console.log("update success")
            this.$router.push({ name: 'dashboard' })
          })
          .catch(error => {
            this.isLoading = false;
            this.errors = error.response.data.errors
            console.log(error);
            console.log("update not success")
          })
        },
        getUser: function(){
            let id = this.$route.params.id

            this.axios({
                method: 'GET',
                url: process.env.API_URL + 'users/'+id,
                headers:{
                    'Authorization': localStorage.getItem('token')
                    // 'Authorization': this.$store.getters.token
                }
            })
            .then(response => {
                let user = response.data
                console.log(response)
                console.log("get success")
                this.user.username = user.username
                this.user.email = user.email
                this.user.id = user.id
                this.user.phone_number = user.phone_number
                this.user.role_id = user.role_id
            })
            .catch(error => {
                console.log(error);
                console.log("add not success")
            })
        },
        get_roles: function() {
            this.$store.dispatch("get_roles", {
                token: localStorage.getItem('token')
            })
        },
    },
    computed: {
        isLoggedIn: function() {
            return this.$store.getters.isLoggedIn
        },
        roles: function(){
            return this.$store.getters.roles
        }
    },
    created: function(){
        this.getUser()
        this.get_roles()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hero{
        background-color: whitesmoke;
    }
</style>