<template>
    <div style="margin-top: 50px;">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>Users Edit</h1>
                    <br><br>
                    <v-text-field
                            label="Username"
                            type="text"
                            v-model="user.username"
                    ></v-text-field>
                    <v-text-field
                            label="Primary E-Mail"
                            disabled=true
                            type="text"
                            v-model="user.primaryMail"
                    ></v-text-field>
                    <v-text-field
                            label="Created at"
                            disabled=true
                            type="text"
                            v-model="user.created_at"
                    ></v-text-field>
                    <v-text-field
                            label="Updated at"
                            disabled=true
                            type="text"
                            v-model="user.updated_at"
                    ></v-text-field>
                    <v-text-field
                            label="Invite Code"
                            disabled=true
                            type="text"
                            v-model="user.inviteCode"
                    ></v-text-field>
                    <v-select
                            :items="statusAvalible"
                            label="Status"
                            v-model="user.status"
                            disabled="disabled"
                    ></v-select>
                    <v-checkbox
                            v-model="user.developer"
                            label="Developer"
                    ></v-checkbox>
                    <v-checkbox
                            v-model="user.admin"
                            label="Admin Access"
                    ></v-checkbox>
                    <v-btn
                            color="success"
                            @click="saveSettings"
                    >Save</v-btn>
                    <br><br>
                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">#</th>
                                <th class="text-left">Mail</th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in mails" :key="item.id">
                                <td>{{ item.id }}</td>
                                <td>{{ item.mail }}</td>
                                <td>{{ item.status }}</td>
                                <td class="text-right">
                                    <v-menu offset-y>
                                        <template v-slot:activator="{ on }">
                                            <v-btn
                                                    color="primary"
                                                    v-on="on"
                                            >
                                                <v-icon>mdi-settings</v-icon>
                                            </v-btn>
                                        </template>
                                        <v-list>
                                            <v-list-item
                                                    :disabled="item.status != 'waiting'"
                                                    link
                                                    @click="validateMail(item.id)"
                                            >
                                                <v-list-item-title>Activate Mail adress</v-list-item-title>
                                            </v-list-item>
                                            <v-list-item
                                                    link
                                                    @click="resendValidationMail(item.id)"
                                            >
                                                <v-list-item-title>Resend Validation Mail</v-list-item-title>
                                            </v-list-item>
                                        </v-list>
                                    </v-menu>
                                </td>
                            </tr>
                            </tbody>
                        </template>
                    </v-simple-table>
                </v-flex>
            </v-layout>
        </v-container>


    </div>

</template>

<script>

    import AdminService from '../../services/Admin'

    export default {
        data () {
            return {
                user: {},
                statusAvalible: ['active'],
                mails: []
            }
        },
        components: {
        },
        methods: {
            'loadUser': function () {
                AdminService.getUserDetails(this.$route.params.id).then((res) => {
                    this.user = res.data.data.details;
                    this.mails = res.data.data.mails;
                })
            },
            'saveSettings': function () {
                AdminService.updateUser(this.$route.params.id, this.user.username, this.user.admin, this.user.developer).then(() => {
                   this.loadUser();
                });
            },
            'resendValidationMail': function(id) {
                AdminService.resendValidationMail(id).then((res) => {
                    alert("Mail send again");
                });
            },
            'validateMail': function(id) {
                AdminService.validateMail(id).then((res) => {
                    this.loadUser();
                })
            }
        },
        mounted: function() {
            this.loadUser();
        }
    }
</script>

