<template>
   <div id="pageTable">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex sm12>
          <h3>Training</h3>
        </v-flex>
        <v-flex lg12>
          <v-dialog
              v-model="dialog"
              width="500"
            >
              <v-btn
                slot="activator"
                color="blue-grey"
                dark
              >
               Add User
              </v-btn>

              <v-card>
                <v-card-title
                  class="headline grey lighten-2"
                  primary-title
                >
                  Add User
                </v-card-title>

                <v-card-text>
                  <v-form >
                  <v-text-field
                      v-model="users.name"
                      label="Name"
                      required
                    ></v-text-field>
                    <v-text-field
                      v-model="users.address"
                      label="Adress"
                      required
                    ></v-text-field>
                  </v-form>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                    slot="activator"
                    color="success"
                    dark
                    @click="dialog = false"
                    v-on:click="AddNewUsers"
                  >
                  Add User
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
           <v-btn color="success" v-on:click="getAllDatas">Get All</v-btn>
         </v-flex>
        <v-flex lg12>
          <v-card>
            <v-toolbar card color="white">
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-text class="pa-0">
              <p>Headers</p>
              <v-card >
                <p></p>
              </v-card>
              <template>
                <v-data-table
                  :headers="complex.headers"
                  :items="user"
                  class="elevation-1"
                >
                  <template slot="items" slot-scope="props">
                    <td class="text-xs-left">{{ props.item.name }}</td>
                    <td class="text-xs-left">{{ props.item.address}}</td>
                    <td>
                      <v-dialog
                        v-model="dialogs"
                        width="500"
                        >
                        <v-btn
                        slot="activator"
                        color="red lighten-2"
                        dark
                        v-on:click="getById(props.item._id)"
                        >
                        ID
                      </v-btn>
                      <v-card>
                        <v-card-text>
                             <ul v-for="user in uuser" >
                               <p>name = {{user.name}}</p>
                               <p >adress = {{user.address}}</p>
                             </ul>

                      </v-card-text>

                      <v-divider></v-divider>

                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn
                        color="primary"
                        flat
                        @click="dialog = false"
                        >
                        I accept
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </td>
                    <td>
                      <v-btn color="error" v-on:click="deleteItems(props.item._id)" @click="snackbar = true">delete
                      </v-btn>
                    </td>
                  </template>
                </v-data-table>
                <v-snackbar
                  v-model="snackbar"
                  :top="y === 'top'"
                  :vertical="mode === 'vertical'"
                  >
                  {{ text }}
                  <v-btn
                    color="pink"
                    flat
                    @click="snackbar = false"
                    >
                    Close
                  </v-btn>
                </v-snackbar>

              </template>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      user : [],
      uuser : '',
      dialog : false,
      dialogs : false,

      // snackbar
       snackbar: false,
        y: 'top',
        x: null,
        mode: '',
        timeout: 6000,
        text: 'success',
// insert,
         users : {
           name : '',
          address : ''
         },
      //data Tables
      complex: {
        headers: [
          {
            text: 'Name',
            value: 'name'
          },
          {
            text: 'Address',
            value: 'address'
          },

        ],
      },
  }
},
 methods: {
    getAllDatas : function(){
      let items = this;
      let url = 'http://localhost:5000/user';

      axios.get(url).then(function(res){
        items.user = res.data
        console.log(res.data)
      })
      .catch( function(err){
        console.log(err)
      } )
    },
    getById : function(id) {
      let self = this
      let url = 'http://localhost:5000/user/' + id
      axios.get(url).then((res) => {
        self.uuser = res.data
        console.log(res.data)
      })
    },
    deleteItems: function(id) {
      let url = 'http://localhost:5000/user/' + id
      axios.delete(url).then((res) => {
        console.log(res.data)
      })
    },
    AddNewUsers: function() {
      let url = 'http://localhost:5000/user'
      axios.post(url, {
        name : this.users.name,
        address : this.users.address
      })
      .then((res) => {
        console.log(res.data)
      })
    },
  }
  };
</script>