<template lang="html">
  <div>

  <div class="row container-fluid" id="vezbaDatum">

      <!-- * make a regexp to check for the exercise name to be
           * only letters !!
      -->

      <input class="col-md-6 col-lg-4 col-lg-offset-2 " id ="exerciseName"
      v-model="exerciseInfo.name" type="text" name="" value="" placeholder="insert exercise">

      <input class="col-md-6 col-lg-4 " id="dateOfWork" type="date" v-model="exerciseInfo.datum"
      v-on:change="isActive = true">
  </div>

  <div id="muscleGroup" class="row container-fluid">
    <select v-model="exerciseInfo.group" class="selectpicker col-md-3 col-lg-1 col-lg-offset-2" name="">
      <optgroup label="GroupMucles">
        <option v-for="muscle in groupMuscles" >{{muscle}}</option>
      </optgroup>
    </select>
  </div>
<div class="container" id="setsContainer">

  <div class="row container-fluid" id="firstSet">
    <label for="">
      <input type="checkbox" name="" value="1"
      v-on:change="ckdBox(1,$event)">
      First Set Info
    </label>
    <label v-bind:class="{active:isFirstActive,notActive:!isFirstActive}">
        <input type="text" name="" value="" v-model="exerciseInfo.firstSet.reps"> x
        <input type="text" name="" value="" v-model="exerciseInfo.firstSet.kgs"> kg
    </label>
  </div>

    <div class="row container-fluid" id="secondSet">
      <label for="">
        <input type="checkbox" name="" value="2"
        v-on:change="ckdBox(2,$event)">
        Second Set Info
      </label>
      <label v-bind:class="{active:isSecondActive,notActive:!isSecondActive}">
          <input type="text" name="" value="" v-model="exerciseInfo.secondSet.reps"> x
          <input type="text" name="" value="" v-model="exerciseInfo.secondSet.kgs"> kg
      </label>
    </div>

    <div class="row container-fluid" id="thirdSet">
      <label for="">
        <input type="checkbox" name="" value="3"
        v-on:change="ckdBox(3,$event)">
        Third Set Info
      </label>
      <label v-bind:class="{active:isThirdActive,notActive:!isThirdActive}">
          <input type="text" name="" value="" v-model="exerciseInfo.thirdSet.reps"> x
          <input type="text" name="" value="" v-model="exerciseInfo.thirdSet.kgs"> kg
      </label>
    </div>

</div>

<div id="submitInf">
  <button type="submit" class="btn btn-primary" name="button" v-on:click="submitInfo">Submit info</button>
</div>


  <div id="preview" class="row container-fluid">
    <h1>Preview of Info </h1>
    <p>{{exerciseInfo.name}}</p>
    <p>{{exerciseInfo.group}}</p>
    <p v-bind:class="{active:isActive,notActive:!isActive}">
      {{exerciseInfo.datum | momentFormat}}</p>
    <h2 v-if="isFirstActive">First Set</h2>
    <p v-if="isFirstActive">{{exerciseInfo.firstSet.reps}} reps x {{exerciseInfo.firstSet.kgs}}kg </p>
    <h2 v-if="isSecondActive">Second Set</h2>
    <p v-if="isSecondActive">{{exerciseInfo.secondSet.reps}} reps x {{exerciseInfo.secondSet.kgs}}kg </p>
    <h2 v-if="isThirdActive">Third Set</h2>
    <p v-if="isThirdActive">{{exerciseInfo.thirdSet.reps}} reps x {{exerciseInfo.thirdSet.kgs}}kg </p>

  </div>
  </div>
</template>

<script>

const mysql = require('mysql');
var moment = require('moment');

export default {
  data:function(){
    return {
      exerciseInfo:{
        name:"",
        group:"",
        datum: moment().format("DD-MMM-YYYY"),

        //Sets contain obj
        //{setNum:...,reps:...,kgs:...}
        firstSet:{
            reps:null,
            kgs:null
        },
        secondSet:{
            reps:null,
            kgs:null
        },
        thirdSet:{
          reps:null,
          kgs:null
        }
      },
      isActive:false,
      isFirstActive:false,
      isSecondActive:false,
      isThirdActive:false,
      groupMuscles:['Chest','Back','Arms','Shoulders','Legs']
      }
    },
    methods:{
      submitInfo:function(){

        var mysql      = require('mysql');
        var connection = mysql.createConnection({
          host     : 'localhost',
          user     : 'me',
          password : 'secret',
          database : 'my_db'
        });

        connection.connect();

      },
      ckdBox : function(arg,e)
      {
          if(arg === 1){
            this.isFirstActive = !this.isFirstActive;
          }
          if(arg === 2 ){
            if(this.isFirstActive){
                this.isSecondActive = !this.isSecondActive ;
            }
            else {
              e.target.checked = false;
            }
          }

          if(arg === 3){
            if(this.isFirstActive && this.isSecondActive){
                this.isThirdActive = !this.isThirdActive;
            }
            else {
              e.target.checked = false;
            }
          }
      }


    },
    filters: {
      momentFormat: function (date) {
      return moment(date).format('DD-MMM-YYYY');
    }
  }
}