<template>
<div class="container">
    <center><h4 class="text-dark">DevPremier CRM Installation Wizard</h4></center>
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <label for="">Output of the commands running on the server:</label>
                <pre  id="fix_height" class="bg-dark text-light" style="color:white">
                  {{ artisan_op }}
                </pre>
              </div>
            </div>
          </div>
        </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                  <div class="card-body">
                      <label for="env">.env file data (update, if something is wrong!, you can also update this file later in the root directory)</label>
                    <textarea v-model="env" class="form-control bg-dark text-light" id="" cols="30" rows="7"></textarea>
                  </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">Admin Email</label>
                <input type="email" v-model="email" class="form-control"  />
                
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">Admin Password</label>
                <input type="text" v-model="password" class="form-control" />
              </div>
            </div>
          </div>
          <!-- <input type="button" value="Install" class="btn btn-primary btn-block btn-sm" @click="create_admin"> -->
          <button 
          class="btn btn-block btn-success" 
          type="button" 
          @click="create_admin"
          :disabled="loading"
          >Install and Create Admin
            <div v-if="loading" class="spinner-border text-light" role="status">
                <span class="sr-only">Loading...</span>
            </div> 
          </button>
      </div>
    </div>
</div>
</template>

<script>

export default {
    name: 'Third',
    data(){
        return {
            loading:false,
            server_details:[],
            purchase_code:'',
            email:"",
            password:"",
        }
    },
    computed:{
      env: {
        get () {
          return this.$store.state.installerStore.contents;
        },
        set (value) { 
          this.$store.dispatch('update_contents', value); 
        }
      },
      artisan_op: {
        get () {
          return this.$store.state.installerStore.artisan_op.toString();
        }
      },
    },
    mounted(){
        console.log('final comp called');
        console.log(this.$store.state.installerStore.contents);
        console.log("this.$route.name");
        console.log(this.$route.name);
        console.log(window.axios.defaults.baseURL);
        // this.fetch_server_details();
        // this.env = ;
        // this.artisan_op = this.$route.query.artisan_op;
    },
    methods:{
      async create_admin(){
        this.loading = true;
        
        await axios.get('api/refreshCSRFToken').then((res) => {
          console.log('res token');
          console.log(res.data.token);
          window.axios.defaults.headers.common['X-CSRF-TOKEN'] = res.data.token;
          this.loading = false;
        });

        await axios.post('api/install/final', {
          'env':this.env,
          'email':this.email,
          'password':this.password
        }).then((res) => {
          if(res.data.message == 'success'){
            window.location.reload();
            this.loading = false;
          }
        });

      },
        async verify_purchase_code(){
            if(this.purchase_code == ''){
                return alert('Please enter your purchase code!');
            }
            

            // data to be sent to the POST request
            let tmp_url = localStorage.getItem('tmp_url');
            let tmp = tmp_url.split("/");
            tmp.splice(0, 2);
            let requested_domain = tmp.join('/');
            let _data = {
                'purchase_code': this.purchase_code,
                'requested_domain':requested_domain
            }
            let docs_url = 'http://127.0.0.1/products/devpremier/devpremier_docs/api/verify_purchase_code';
            fetch(docs_url, {
                method: "POST",
                body: JSON.stringify(_data),
                headers: {"Content-type": "application/json; charset=UTF-8"}
            })
            .then(response => response.json()) 
            .then(
                res => console.log(res)
                // named route
                // router.push({ name: 'user', params: { userId: '123' } })
            )
            .catch(err => console.log(err));

        },
        async fetch_server_details(){
            this.loading = true;
            await axios.get('/api/server_details')
            .then((res) => {
                this.server_details = res.data.server_details
                this.loading = false;
            });
        },
    }
}
</script>

<style scoped>
  #fix_height{
    height: 150px;
    overflow-y: auto;
  }
</style>