<template>
  <v-container grid-list-xl>
      <v-flex>
    <v-card>
      <v-toolbar flat color="white">

        <v-card-title>
        <h3 style="position:relative; left:px; top:20px;"><b>Forum Questions</b></h3>

        <h5 style="position:relative; left:40px; top:6px;">Select Category</h5>

        <span style="position:relative; left:70px; top:-10px;">

              <v-btn color="black" flat>Suggestion</v-btn>
              <v-btn color="black" flat>Sex</v-btn>
              <v-btn color="black" flat>Health</v-btn>
              <v-btn color="black" flat>Skin & Beauty</v-btn>
              <v-btn color="black" flat>Diet & Ex</v-btn>
  
        </span>
        
        </v-card-title>

        <v-spacer></v-spacer>

        <v-dialog v-model="dialog" max-width="800px">

          
        <!-- <v-btn style="position:relative; top:-10px;" slot="activator" flat class="mb-2">Add New Question<v-icon>add</v-icon></v-btn> -->

          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
              <v-spacer></v-spacer>
              <v-icon @click="close">close</v-icon>
            </v-card-title>
            <v-flex>
              <v-card>

                <v-card-text>

            <span>
            <p><b>Ana Suggestion:</b> Select Suggestion</p></span>
            <h5>Select Category:</h5>
            <span>
              <v-btn color="black" flat>Suggestion</v-btn>
              <v-btn color="black" flat>Sex</v-btn>
              <v-btn color="black" flat>Health</v-btn>

              <v-btn color="black" flat>Skin & Beauty</v-btn>

              <v-btn color="black" flat>Diet & Ex</v-btn>
              </span>

                </v-card-text>

            </v-card>
            </v-flex>
            <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>

              <v-flex xs12 sm6 md12>

            <v-textarea
             solo
            name="input-7-4"
            label="Type Question"
          ></v-textarea>
                </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
  
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn dark large @click.native="save">Post Question</v-btn>
            </v-card-actions>
            </v-card>
            </v-dialog>
  
          
          
          <v-dialog v-model="dialog1" max-width="800px">
          <v-card>
          <v-card-title>
          <span class="headline">Edit Question</span>
          <v-spacer></v-spacer>
          <v-icon @click="close1">close</v-icon>
          </v-card-title>
  
          <v-card-text>
            <v-layout wrap>
                <v-flex xs12 sm6 md12>
                  <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
                </v-flex>
              </v-layout>
              <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br>
              Diagnosis 1,Diagnosis 2,Diagnosis 3
              <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span>
            </v-card-text>

           </v-card>
         </v-dialog>
      </v-toolbar>
      <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"

        :pagination.sync="pagination"

      >
      <template slot="items" slot-scope="props">

        <tr v-if="props.index === 0">

          <td id="td">&nbsp;</td>
          <td>
          <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span>
          </td>
          <td id="td">&nbsp;</td>
            <td id="td">&nbsp;</td>
        </tr>
        <tr>

          <td id="td" class="text-xs-center">{{ props.item.no }}</td>

          <td id="td">{{ props.item.ques }}</td>

          <td id="td" class="text-xs-center">{{ props.item.res }}</td>
          <td class="text-xs-center">

            <span>

            <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>

            <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>

            </span>

          </td>

        </tr>

        </template>

      </v-data-table>
   
    </v-card>
    </v-flex>
    </v-container>
  </template>
  <script>
  export default {
    data: () => ({
      dialog: false,
      dialog1: false,

      pagination: {
        rowsPerPage: 10,
      },

      headers: [
        {
          text: 'No.',

          align: 'center',

          sortable: false,
          value: 'name'
        },

        { text: 'Posts', value: 'posts', sortable: false, align: 'center' },
        { text: 'Responses', value: 'responses', sortable: false, align: 'center' },
        { text: '', value: 'carbs', sortable: false, align: 'center' },

      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0
      },
      defaultItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0
      }
    }),
  
    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question';
      }
    },
  
    watch: {
      dialog (val) {
        val || this.close();
      }
    },
  
    created () {
      this.initialize();
    },
  
    methods: {
      initialize () {
        this.desserts = [
          {
            no: '1',

            ques: 'questions',

            res: 9.0,

          },

        ];

      },    

  
      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog1 = true;
      },
  
      deleteItem (item) {
        const index = this.desserts.indexOf(item);
        confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1);
      },
  
      close () {
        this.dialog = false;
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem);
          this.editedIndex = -1;
        }, 300);
      },
      close1 () {
        this.dialog1 = false;
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem);
          this.editedIndex = -1;
        }, 300);
      },
      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem);
        } else {
          this.desserts.push(this.editedItem);
        }
        this.close();
      },
      save1 () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem);
        } else {
          this.desserts.push(this.editedItem);
        }
        this.close1();
      }
    }
  };

  </script>
  <style>

  #td{

      border: 1px solid #dddddd;
      text-align: left;

      padding: 8px;

      max-width: 300px;

  }
  </style>