<template>

  <div>

  <!--------------------------------------------------------Navigation------------------------------------------>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li><router-link :to="{ name: 'projects'}">Projects</router-link></li>
      </ul>

      <ul v-if="token == ''" class="nav navbar-nav navbar-right">
        <li><a href="#" data-toggle="modal" data-target="#signupModal"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#" data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>


      <ul v-if="token != ''" class="nav navbar-nav navbar-right">
        <li><router-link :to="{ name: 'user'}">User</router-link></li>
        <li><a href="#" v-on:click="logout()">Logout</a></li>
      </ul>
    </div>
  </nav>









  {{ projects }}
  {{ images }}


<!-----------------------------------------------LOGIN--------------------------------------------------------------->

    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria_hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="loginModalLabel">Login</h5>
            <!---<button type="button" class="close" data-dismiss='modal' aria-label="Close">
              <span aria_hidden="true">close</span>
            </button>-->
          </div>

          <div class="modal-body">

              <form>
                <input v-model="loginData['input1']" placeholder="Enter ID or Email" />
                <input v-model="loginData['password']" placeholder="Enter Password" />
                <br />
                <br />
                <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="login()">
                  Login
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                  Close
                </button>
              </form>
            </div>
          </div>
        </div>
    </div>

<!---------------------------------------------------SIGNUP------------------------------------------------------------>

    <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria_hidden="true">$times;</span>
            </button>
          </div>

          <div class="modal-body">
            <form>
              <input type="text" v-model="signupData['username']" placeholder="User Name" required/><br/>
              <input type="text" v-model="signupData['password']" placeholder="Password" /><br/>
              <input type="text" v-model="signupData['email']" placeholder="Email" /><br/>
              <input type="text" v-model="signupData['location']" placeholder="Location" />
              <br />
              <br />

              <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="signup()">
                OK
              </button>

              <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!--------------------------------Edit project IMAGE--------------------------------------->
    <div class="modal fade" id="editProjectModal" tabindex="-1" role="dialog" aria-labelledby="editProjectModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editProjectModal">Sign Up</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria_hidden="true">$times;</span>
            </button>
          </div>

          <div class="modal-body">


            <br/><br/>






            <div v-if="!image">
              <h5>Select an image</h5>
              <input type="file" @change="onFileChange">
            </div>
            <div v-else>
              <img :src="image" width="450" height="300" margin="16"/> <br/><br/>
              <button type=button class="btn btn-danger" @click="removeImage">Remove</button>
              <button type=button class="btn btn-success" v-on:click="updateImage()">OK</button>
            </div>
          </div>

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

<!------------------------------------REMOVE PROJECT-------------------------------------------->
    <div class="modal fade" id="removeProjectModal" tabindex='-1' role='dialog' aria-labelledby='removeProjectModalLabel' aria_hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="removeProjectModal">Close Project</h5>
            <div class="modal-body">
              <h5>Are you sure?</h5>

              <button type="button" class="btn btn-danger" v-on:click="closeProject(project['id'])">DELETE</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>

<!----------------------------------------PLEDGE-------------------------------------------------->
<!--pledgeData: {
      "id": '',
      "amount": 0,
      "anonymous": true,
      "card": {
        "authToken": "string"
      }
    }-->

  <div class="modal fade" id="pledgeModal" tabindex='-1' role='dialog' aria-labelledby='pledgeModalLabel' aria-hidden='true'>
    <div class='modal-dialog' role='document'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title' id='pledgeModal'>Pledge</h5>
          <div class='modal-body'>
          <form>

            <input type="number" v-model.number="pledgeData['amount']" placeholder="Enter amount ($)" required/><br/>
            <!--
            <input type="radio" id="anonymous" value=true v-model="pledgeData['anonymous']">
            <input type="radio" id="non-anonymous" value=false v-model="pledgeData['anonymous']">
            -->

            <input type="checkbox" id="checkbox" v-model="pledgeData['anonymous']">
            <label for="pledgeData['anonymous']">{{ pledgeData['anonymous'] }}</label>
            <br />
            <br />

            <!--<router-link :to="{ name: 'project', params: { projectId: project['id'] }}">-->
            <router-link :to="{ name: 'projects'}">
              <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="pledge()">
              OK
              </button>
            </router-link>

            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>

            {{ pledgeData }}

          </form>
          </div>
        </div>
      </div>
    </div>
  </div>


<!----------------------------ERROR MESSAGE----------------------------------------->
    <div v-if="errorFlag" style="color: red;">
      {{ this.error}}
    </div>


<!-------------------------------VIEW SINGLE PROJECT--------------------------------->
    <div class="singleProject" v-if="$route.params.projectId">
      <div id="project">
        <router-link :to="{ name: 'projects'}">Back to Projects</router-link>

        <br />
        <br />
        {{ this.project }}
          <tr>
            <td>Title</td>
            <td>Subtitle</td>
            <td>Description</td>
            <td>Target</td>
            <td>Progress</td>
          </tr>
          <tr>
            <td>{{ this.project.title }}</td>
            <td>{{ this.project.subtitle }}</td>
            <td>{{ this.project.description }}</td>
            <td>{{ this.project.target }}</td>
            <td>{{ project['progress']['currentPledged'] }}</td>
          </tr>
          </table>
          <br/>

          <div v-if="project['open']!=true">
            <button type="button" id="project_btn" class="btn btn-disabled">Pledge</button>
            <button v-if="token!='' && validateUser($cookie.get('userid'), project['creators'], project['creators'].length) && project['open']==false" type=button class="btn">closed</button>
          </div>

          <div v-if="project['open']==true">
            <button v-if="token!=''" type="button" data-toggle="modal" data-target="#pledgeModal" id="project_btn" class="btn btn-primary" v-on:clicked="pledgeData['id']=project['creators'][0]['id']">Pledge</button>
            <button v-if="token==''" type="button" id="project_btn" class="btn btn-disabled">Pledge</button>
            <button v-if="token!='' && validateUser($cookie.get('userid'), project['creators'], project['creators'].length)" type="button" data-toggle="modal" data-target="#editProjectModal" class="btn btn-warning">Edit</button>
            <button v-if="token!='' && validateUser($cookie.get('userid'), project['creators'], project['creators'].length)" type=button data-toggle="modal" data-target="#removeProjectModal" class="btn btn-success">opened</button>
          </div>


          <br/><br/>
          {{ project['creators'] }}<br/>
          {{ projectPageIndex }}
      </div>
    </div>





<!---------------------------------ADD NEW PROJECT--------------------------------->
    <div v-else-if="$route.params.new">
      <div id="newProject">
        <h3>Add a new project</h3>
        <form id="needs-validation" novalidate>
          <a>Title</a><br/>
          <input v-model="projectData['title']" placeholder="Enter Title" /><br/>
          <a>Subtitle</a><br/>
          <input v-model="projectData['subtitle']" placeholder="Enter Subtitle" /><br/>
          <a>Description</a><br/>
          <textarea v-model="projectData['description']" placeholder="Enter Description" /><br/>
          <a>Target</a><br/>
          <input v-model.number="projectData['target']" placeholder="Enter Target" /><br/>
          <a>Creators</a><br/>
          <input v-model="creator" placeholder="Add creators" />
          <button type="button" class="btn" v-on:click="addProject_addCreator()">add</button><br/>


          <br />
          <br />


          <router-link :to="{ name: 'project', params: { projectId: project.id}}">
            <button type="button" class="btn btn-primary" v-on:click="addProject(); addProject_clear()">
            OK
            </button>
          </router-link>
          <router-link :to="{ name: 'projects'}">
            <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="addProject_clear()">
              Cancel
            </button>
          </router-link>
          {{ projectData }}

        </form>
      </div>
    </div>


<!-----------------------------PROJECT LIST PAGE------------------------------------------->
    <div v-else>
    <!--{{ projects }}<br/>
    {{ projects_to_display }}-->
    <h3>Project page</h3>



    <button v-if="token==''" id="project_btn" class="btn btn disabled">Add a Project</button>

    <router-link v-if="token!=''" :to="{ name: 'newProject', params: { new: 'new'}}">
      <button id="project_btn" class="btn btn-primary ">Add a Project</button>
    </router-link>

      <button id="project_btn" class="btn btn-primary" v-on:click="test()">test</button>


      <!--<div id="project">
        <table>
          <tr v-for="project in projects_to_display">
            <td>
            title: {{ project.title }}<br/>
              id: {{ project.id }} <br/><br/>
            </td>
            <td>
              <router-link :to="{ name: 'project', params: { projectId: project.id}}">
                <button id="project_btn" class="btn btn-primary" v-on:click="getProject(project.id)">View</button>
              </router-link>
            </td>
          </tr>
        </table>
      </div>-->

      <!--<ul class="pagination pagination-lg">
        <li v-for="index in projectPageIndex"><a href='#' v-on:click="getProjects_limit(index)">{{ index/2+1 }}</a></li>
      </ul>-->


      <div id="project">
        <table>
          <tr v-for="project in projects">
            <td>
            {{ project.title }}<br/>
            {{ project.id }} <br/><br/>
            </td>
            <td>
              <router-link :to="{name: 'project', params: { projectId: project.id}}">
                <button id="project_btn" class="btn btn-primary" v-on:click="getProject(project.id)">Open</button>
              </router-link>
            </td>
          </tr>
        </table>
      </div>

    </div>
  </div>


</template>



<script>
export default {
  data (){
    return {
      error: "",
      errorFlag: false,
      tokenstatus: false,
      user: {
        "id": '',
        "token": ''
      },
      project_indexAndCount: {
        'index': 1,
        'count': 2
      },
      projectData: {
        "title": "",
        "subtitle": "",
        "description": "",
        "target": 0,
        "creators": [
          {
            "id": ""
          }
        ],
        "rewards": [
          {
            "amount": 0,
            "description": "string"
          }
        ],
      },
      projectPageIndex: [],
      projects: [],
      projects_to_display: [],
      project: [],
      images: [],
      image: "",
      file: "",

      imagetest: '',

      creator: "",

      // username:"",
      // password:"",
      token: '',

      signupData: {
        "username": "",
        "email": "",
        "password": "",
        "location": ""
      },
      pledgeData: {
        "id": '',
        "amount": 0,
        "anonymous": true,
        "card": {
          "authToken": "string"
        }
      }

    }
  },
  mounted: function(){
    if (this.$cookie.get('token')){
      this.token = this.$cookie.get('token');
      this.tokenStatus = false;
    } else if (this.$cookie.get('token')==undefined){
      this.token = '';
    }

    this.projectData["creators"][0]["id"] = parseInt(this.$cookie.get('userid'));
    this.getProjects();
    this.getProjects_limit(0);
    // this.displayProject(0);
    for (var i = 0; i<this.projects.length; i++){
      this.getImage(this.projects[i]['id']);
    }



    // this.projects.sort(function(a, b){
    //   var x = a.title.toLowerCase();
    //   var y = b.title.toLowerCase();
    //   if (x < y) {return -1;}
    //   if (x > y) {return 1;}
    //   return 0;
    // });

  },
  methods: {

    //ADD PROJECT
    addProject:function(){
      this.$http.post('http://localhost:4941/api/v2/projects', this.projectData, {
        headers :{
          'X-Authorization': this.token
        }
      })
      .then(function(response){
        console.log("addProject Successful!!!");
        alert("Project (" + this.projectData['title'] + ") added!!!");
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      })
    },
    addProject_addCreator: function(){
      this.projectData['creators'].push({'id':this.creator});
      this.creator='';
    },
    addProject_clear: function(){
      this.projectData['title'] = '';
      this.projectData['subtitle'] = '';
      this.projectData['description'] = '';
      this.projectData['target'] = 0;
    },
    displayProject: function(index){
      console.log("displayProject called!!");
      this.projects_to_display = this.projects.slice(index, index+2);
      console.log(this.projects_to_display);

    },
    closeProject: function(projectId){
      // console.log("closeProject CALLED");
      // console.log(projectId);
      // console.log(this.token);
      var stats = {
        "open": false
      };
      this.$http.put('http://localhost:4941/api/v2/projects/'+projectId, stats, {
        headers :{
          'X-Authorization': this.token
        }
      })
      .then(function(response){
        console.log("closeProject: SUCCESS")
        this.project['open'] = false;
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      })
    },
    getProjects: function(){
      console.log("getProjects called");
      this.$http.get('http://localhost:4941/api/v2/Projects')
      .then(function(response){
        this.projects = response.data;
        // console.log(response.data);
        var projectlength = Math.ceil(this.projects.length);
        console.log("projectLength: " + projectlength);
        for(var i=0; i <= projectlength; i+=2){
          this.projectPageIndex.push(i);
        }
      }, function(error) {
        this.error = error;
        this.errorFlag = true;
      });
    },
    getProjects_limit: function(index){
      this.$http.get('http://localhost:4941/api/v2/Projects?startIndex='+index+'&count=2')
      .then(function(response){
        this.projects_to_display = response.data;
      }, function(error){
        this.error = error;
        this.errorFlag= true;
      })
    },
    getProject: function(id){
      console.log("getProject called!!!!!!!!!!!!!!");
      this.$http.get('http://localhost:4941/api/v2/Projects/' + id)
      .then(function(response){
        this.project = response.data;
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      });
    },
    // addImage: function(id){
    //   this.$http.put('http://localhost:4941/api/v2/Projects/'+id+'/image', this.image, {
    //     headers :{
    //       'X-Authorization': this.token
    //     }
    //   })
    //   .then(function(response){
    //     console.log("image Added");
    //   }, function(error){
    //     this.error = error;
    //     this.errorFlag = true;
    //   })
    // },
    login: function(){
      console.log(this.username);
      console.log(this.password);
      var isEmail = this.validateEmail(this.loginData["input1"]);
      if (isEmail == true){
        this.$http.post("http://localhost:4941/api/v2/users/login?email="+this.loginData["input1"]+"&password="+this.loginData["password"])
        .then(function(response){
          this.loginData["input1"] = "";
          this.loginData["password"] = "";
          this.token = response.data["token"];

          this.$cookie.set('token', response.data["token"], 7);
          this.tokenStatus = true;
          this.user = response.data;
          this.projectData["creators"][0]["id"] = this.user["id"];
          this.$cookie.set('userid', this.user["id"]);
          // console.log(this.projectData);
          // console.log(this.tokenStatus);
        }, function(error){
          this.error = error;
          this.errorFlag = true;
          if (this.error['bodyText'] == "Invalid username/email/password supplied"){
            alert("Invalid username/email/password supplied");
          }
        })
      } else if (isEmail == false) {
        this.$http.post("http://localhost:4941/api/v2/users/login?username="+this.loginData["input1"]+"&password="+this.loginData["password"])
        .then(function(response){
          this.loginData["input1"] = "";
          this.loginData["password"] = "";

          this.token = response.data["token"];
          this.$cookie.set('token', response.data["token"], 7);
          this.tokenStatus = true;
          this.user = response.data;
          console.log(this.user);
          this.projectData["creators"][0]["id"] = this.user["id"];
          this.$cookie.set('userid', this.user["id"]);
          console.log(this.projectData);

        }, function(error){
          this.error = error;
          this.errorFlag = true;
        })
      }
    },
    logout: function(){
      this.$http.post("http://localhost:4941/api/v2/users/logout", "",{
        headers :{
          'X-Authorization': this.token
        }
      })
      .then(function(response){
        console.log("Logout OK");
        this.tokenstatus = false;
        this.token = "";
        this.$cookie.remove('token');
        this.$cookie.remove('user');
        this.tokenStatus = false;
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      });
    },
    signup: function() {
      // console.log("signup DONE");
      this.$http.post("http://localhost:4941/api/v2/users", this.signupData)
      .then(function(response){
        console.log("signup OK");
        this.loginData['input1'] = this.signupData['username'];
        this.loginData['password']=this.signupData['password'];
        this.login();

        this.signupData["username"] = "";
        this.signupData["password"] = "";
        this.signupData["email"] = "";
        this.signupData["location"] = "";


      }, function(error){
        this.error = error["body"];
        this.errorFlag = true;
        this.signupData["username"] = "";
        this.signupData["password"] = "";
        this.signupData["email"] = "";
        this.signupData["location"] = "";
        if (error["body"] == "Already logged in"){
          console.log("Already logged in");

        } else if (error["body"] == "Invalid username/email/password supplied"){
          this.error = console.error();;
          console.log("Invalid username/email/password supplied");
        }
      });

    },
    pledge: function() {
      this.$http.post("http://localhost:4941/api/v2/projects/" + this.project['id'] + "/pledge", this.pledgeData,{
        headers :{
          'X-Authorization': this.token
        }
      }).
      then(function(response){
        console.log("pledge OK");
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      });
    },
    // getUser: function(id){
    //   this.$http.get("http://localhost:4941/api/v2/users/" + id, "", {
    //     headers: {
    //       'X-Authorization': this.token
    //     }
    //   })
    //   .then(function(response){
    //     this.user = response.data;
    //   }, function(error){
    //     this.error = error;
    //     this.errorFlag = true;
    //   })
    // },

    getImage: function(projectid){
      this.$http.get("http://localhost:4941/api/v2/projects/"+ projectid +"/image")
      // this.$http.get("http://localhost:4941/api/v2/projects/12/image")
      .then(function(response){
        this.images.push({"id": projectid, "image":response.data });
        this.imagetest = response.data;

      }, function(error){
        this.error = error;
        this.errorFlag = true;
      });
    },
    updateImage: function(){
      this.$http.put("http://localhost:4941/api/v2/projects/"+ this.project['id'] +"/image", this.file, {
        headers :{
          'Content-Type': 'image/png',
          'X-Authorization': this.token
        }
      }).
      then(function(response){
        console.log('S');
      }, function(error){
        this.error = error;
        this.errorFlag = true;
      });
    },
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);

    },

    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
      this.file = file;

    },
    removeImage: function (e) {
      this.image = '';
    },
    convertTobinary: function(image){

    },

    // validateEmail: function(email){
    //   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    //   console.log(email);
    //   console.log(reg.test(email));
    //   if (reg.test(email) == false){return (false);}
    //   return (true);
    // },





    validateUser: function(userid, users, numberofCreators){


      for (var i = 0; i < numberofCreators; i++){
        if (users[i]['id'] == userid){
          return true;
        }
      } return false;
    },

    test: function(){
      // console.log(this.$cookie.get('token'));
      // this.$cookie.remove('token');
      // console.log(this.$cookie.get('token'));
      // this.$cookie.remove('token');
      // this.projects_to_display = 'asdf';
      // console.log(this.projects_to_display);
      this.getImage(1);

    }


  }


}
</script>