<template>
    <div style="margin-top:50px;">
        <v-container grid-list-md pa-10 >
            <v-layout row wrap>
                <v-flex md12>
                    <h1>Profile</h1>
                    <br><br>
                    <h2>E-Mail</h2>
                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">E-Mail</th>
                                <th class="text-left">Status</th>
                                <th class="text-left">Primary</th>
                                <th class="text-right">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in mails" :key="item.name">
                                <td>{{ item.mail }}</td>
                                <td>{{ item.status }}</td>
                                <td>
                                    <span v-if="item.primary">Yes</span>
                                    <span v-if="!item.primary">No</span>
                                </td>
                                <td class="text-right">
                                    <!--<v-btn depressed x-small :disabled="item.status == 'valide'" color="primary" style="margin-right: 10px;">Resend Validation</v-btn>!-->
                                    <v-btn depressed x-small :disabled="item.primary" @click="removeMail(item.id)" color="error" style="margin-right: 10px;">Remove Mail</v-btn>
                                    <v-btn depressed x-small :disabled="item.primary || item.status != 'valide'" @click="markAsPrimary(item.id)" color="success">Mark as Primary</v-btn>
                                </td>
                            </tr>
                            </tbody>
                        </template>
                    </v-simple-table>
                    <h3>Add new Mail</h3>
                    <p>If you add a new Mail we will send you a validation mail.</p>
                    <v-text-field
                            label="E-Mail"
                            value=""
                            v-model="newmail"

                    ></v-text-field>
                    <v-btn
                            color="success"
                            @click="addMail"
                    >
                        Add Mail
                    </v-btn>
                    <h2>Password</h2>
                    <p>New Password</p>
                    <v-text-field
                            label="New Password"
                            value=""
                            type="password"
                            v-model="newpassword"

                    ></v-text-field>
                    <v-btn
                            color="success"
                            @click="changePassword"
                    >
                        Change Password
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>
    import ServerService from '../services/Server'
    import UserService from '../services/User'
    import AppService from '../services/Apps'
    import AppCardsComponente from '../components/AppCards'

    export default {
        data () {
            return {
                nameBig: '',
                nameSmall: '',
                mails: [],
                newmail: '',
                newpassword: ''
            }
        },
        components: {
            "AppCards": AppCardsComponente
        },
        methods: {
            "getMails": function () {
                UserService.mails().then((res) => {
                    this.mails = res.data.data;
                })
            },
            "addMail": function () {
                UserService.addMail(this.newmail).then((res) => {
                    this.getMails();
                });
            },
            "removeMail": function (id) {
                UserService.removeMail(id).then((res) => {
                   this.getMails();
                });
            },
            markAsPrimary: function(id) {
                UserService.markMailAsPrimary(id).then((res) => {
                    this.getMails();
                })
            },
            changePassword: function() {
                UserService.changePassword(this.newpassword).then(() => {
                    alert("Password changed");
                }).catch((res) => {
                    alert("There was an error: "+res.response.data.data.password[0]);
                });
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            UserService.mails().then((res) => {
               this.mails = res.data.data;
            });
        }
    }
</script>

<style>
    .header {
        background-image: url('~@/assets/manhattan-407703_1920.jpg');
        background-repeat: no-repeat;
        margin-top: -100px;
        height: 30vh;
        text-align: center;
    }
    .header h1{
        padding-top: 200px;
        font-size: 56px !important;
        font-weight: 400;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    .header h1 .small{
        font-weight: 300 !important;
    }
    .header h2{
        padding-top: 30px;
        font-size: 34px !important;
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h1{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h2{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
</style>
