<template>
<div>
  <div class="container">
    <!-- Purchase Code Verification -->
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header bg-secondary d-flex justify-content-center text-white">
            <strong>DevPremier CRM - Installation Wizard</strong>
          </div>
          <div class="card-body">
            <!-- Purchase Code Verification -->
            <div class="card">
              <div class="card-body">
                <div class="card-header bgDarkBlue">
                  Purchase Code Verification "To enable the submission of this form" 
                  <img v-if="verified" class="float-right" v-bind:src="checked" alt="verified" width="20px"> 
                  <img v-if="!verified" class="float-right" v-bind:src="remove" alt="verified" width="20px"> 
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                        <div class="float-left">
                            <span style="font-size:11px;" class="text-danger">Where is my purchase code?</span>
                            <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">
                                <!-- <i class="fas fa-external-link" aria-hidden="true"></i> -->
                                <i class="fas fa-external-link-alt" style="font-size:10px;"></i>
                            </a>
                        </div>
                        <input 
                            type="text" 
                            v-model="purchase_code"
                            class="form-control form-control-sm" 
                            placeholder="Enter a valid purchase code to submit this form!"
                        />
                    </div>
                    <button type="button" class="btn btn-block btn-primary" @click="verify_purchase_code"
                    :disabled="code_verifying"
                    >
                        <i class="fas fa-laptop-code pr-2"></i> 
                        <span class="text-light">Verify My Purchase Code</span>
                        
                        <div v-if="code_verifying" class="spinner-border text-light" role="status">
                            <span class="sr-only">Loading...</span>
                        </div> 
                    </button>

                  </div>
                </div>
              </div>
            </div>
            <!-- Extensions Card -->
            <div class="card">
              <div class="card-body">
                <div class="card-header bgDarkBlue">
                  Server Details (All extenstions must have "Installed(<i class="fas fa-circle fa-xs text-success"> </i>)" status)
                  <div class="float-right">
                        <a href="javascript:void(0);" @click="fetch_server_details" class="text-white text-bold">
                          <span style="font-size:11px;">Refresh</span>
                            <i class="fas fa-sync" style="font-size:10px;"></i>
                        </a>
                  </div>
                </div>  
                <!-- If data loaded from server-->
                <div v-if="!loading">
                    <div v-if="!server_details.php_version">
                        <span class="text-danger"> Your php version is not valid as per Devpremier CRM requirements.</span>
                    </div>
                    <div class="bgDarkBlue p-3">
                      Server PHP Version: <span class="float-right">{{ server_details.server_php_version }}</span> <br>
                      Required PHP Version: <span class="float-right">{{ server_details.required_php_version }}</span></div>
                    <hr>
                    <div class="row">
                      
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div>PHP Version Status: 
                                <span class="float-right">
                                    <i v-if="server_details.php_version" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.php_version" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>
                            <div>Ctype Status: 
                                <span class="float-right">
                                    <i v-if="server_details.Ctype" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.Ctype" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>
                            <div>Fileinfo Status: 
                                <span class="float-right">
                                    <i v-if="server_details.Fileinfo" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.Fileinfo" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>

                            <div>JSON Status: 
                                <span class="float-right">
                                    <i v-if="server_details.JSON" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.JSON" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>   

                            <div>bcmath Status: 
                                <span class="float-right">
                                    <i v-if="server_details.bcmath" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.bcmath" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>                             
                        </div>
                        <div class="col-md-4">
                            <div>Mbstring Status: 
                                <span class="float-right">
                                    <i v-if="server_details.Mbstring" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.Mbstring" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>

                            <div>OpenSSL Status: 
                                <span class="float-right">
                                    <i v-if="server_details.OpenSSL" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.OpenSSL" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>

                            <div>PDO Status: 
                                <span class="float-right">
                                    <i v-if="server_details.PDO" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.PDO" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>

                            <div>Tokenizer Status: 
                                <span class="float-right">
                                    <i v-if="server_details.Tokenizer" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.Tokenizer" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>

                            <div>XML Status: 
                                <span class="float-right">
                                    <i v-if="server_details.XML" class="fas fa-circle fa-xs text-success"> Installed</i>
                                    <i v-if="!server_details.XML" class="fas fa-circle fa-xs text-danger"> Not Installed</i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div><strong>Directory</strong>
                                <span class="float-right">
                                    <strong>Permissions</strong>
                                </span>
                            </div>
                            <div>bootstrap/cache
                                <span class="float-right">
                                  <i class="fas fa-circle text-success" v-if="server_details.bootstrap_permission >= '0755'"></i> 
                                  <i class="fas fa-circle text-danger" v-if="server_details.bootstrap_permission < '0755'"></i> 
                                </span>
                            </div>

                            <div>storage/app
                              <span class="float-right">
                                <i class="fas fa-circle text-success" v-if="server_details.stg_app_permission >= '0755'"></i> 
                                <i class="fas fa-circle text-danger" v-if="server_details.stg_app_permission < '0755'"></i>
                              </span>
                            </div>

                            <div>storage/framework
                              <span class="float-right">
                                <i class="fas fa-circle text-success" v-if="server_details.stg_framework_permission >= '0755'"></i> 
                                <i class="fas fa-circle text-danger" v-if="server_details.stg_framework_permission < '0755'"></i>
                              </span>
                            </div>

                            <div>storage/logs
                              <span class="float-right">
                                <i class="fas fa-circle text-success" v-if="server_details.stg_logs_permission >= '0755'"></i> 
                                <i class="fas fa-circle text-danger" v-if="server_details.stg_logs_permission < '0755'"></i> 
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- if data loading -->
                <LoaderComp v-if="loading"></LoaderComp>
                </div>
            </div>  

            <!-- Basic Details  -->
        <div class="card">
          <div class="card-body">
            <div class="card-header bgDarkBlue">
              Basic Details
            </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Application Name</label>
                    <input maxlength="100" type="text" required="required" class="form-control form-control-sm" v-model="app_name">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Application Environment</label>
                    <select v-model="app_env" class="form-control form-control-sm" required>
                      <option value="local" selected>local</option>
                      <option value="staging">staging</option>
                      <option value="production">production</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Application Debug</label>
                    <select v-model="app_debug" class="form-control form-control-sm" required>
                      <option value="true" selected>true</option>
                      <option value="false">false</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Application URL (Set url security http/https)</label>
                    <input type="text" v-model="app_url" class="form-control form-control-sm">
                  </div>
                </div>
              </div>
          </div>
        </div>

        <!-- SMTP details -->
        <div class="card">
          <div class="card-body">
            <div class="card-header bgDarkBlue">
              SMTP Details
            </div>
            <div class="row">
                <div class="col-md-12">
                  <p><b>Note: </b>Run this Cron Job in your server to send email, because this software will insert the email data in the (queue)database, and on running cron, it will automatically be sent to the user from the database jobs table.</p>
                  <strong>
                    <p>cd /path-to-project-root-directory/ && php artisan schedule:run >/dev/null 2>&1</p>
                  </strong>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">MAIL DRIVER</label>
                    <input type="text" class="form-control form-control-sm" v-model="mail_driver">
                  </div>
                  <div class="form-group">
                      <label class="control-label">MAIL HOST</label>
                      <input type="text" class="form-control form-control-sm" v-model="mail_host">
                  </div>
                  <div class="form-group">
                    <label class="control-label">MAIL PORT</label>
                    <input type="text" class="form-control form-control-sm" v-model="mail_port">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">MAIL USERNAME</label>
                    <input type="text" class="form-control form-control-sm" v-model="mail_username">
                  </div>
                  <div class="form-group">
                    <label class="control-label">MAIL PASSWORD</label>
                    <input type="text" class="form-control form-control-sm" v-model="mail_password">
                  </div>
                  <div class="form-group">
                      <label class="control-label">MAIL ENCRYPTION</label>
                      <input type="text" class="form-control form-control-sm" v-model="mail_encryption">
                  </div>
                </div>
              </div>
          </div>
        </div>

        <!-- Database details -->
        <div class="card">
          <div class="card-body">
            <div class="card-header bgDarkBlue">
              Database Details
            </div>
            <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">DB CONNECTION</label>
                    <input type="text" required="required" class="form-control form-control-sm" v-model="db_connection"  value="mysql" />
                  </div>
                  <div class="form-group">
                      <label class="control-label">DB HOST</label>
                      <input type="text" required="required" class="form-control form-control-sm" v-model="db_host">
                  </div>
                  <div class="form-group">
                    <label class="control-label">DB POST</label>
                    <input type="text" required="required" class="form-control form-control-sm" v-model="db_port">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">DB DATABASE</label>
                    <input type="text" required="required" class="form-control form-control-sm" v-model="db_database">
                  </div>
                  <div class="form-group">
                      <label class="control-label">DB USERNAME</label>
                      <input type="text" required="required" class="form-control form-control-sm" v-model="db_username">
                  </div>
                  <div class="form-group">
                    <label class="control-label">DB PASSWORD</label>
                    <input type="text" class="form-control form-control-sm" v-model="db_password">
                  </div>
                </div>
            </div>
          </div>
        </div>

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


    <button 
      class="btn btn-block btn-success mb-5" 
      type="button" 
      v-if="verified" 
      @click="submit"
      :disabled="installing"
      >Submit
        <div v-if="installing" class="spinner-border text-light" role="status">
            <span class="sr-only">Loading...</span>
        </div> 
      </button>
  </div>

</div>
</template>
<script>
export default {
    name: 'Second',

    data(){
        return {
            loading:false,
            server_details:[],
            purchase_code:'',
            app_name:'DevPremier CRM',
            app_env:'production',
            app_debug:'false',
            app_url:'',
            db_connection:'mysql',
            db_host:'localhost',
            db_port:'3306',
            db_database:'devpremier_crm',
            db_username:'root',
            db_password:'root',
            mail_driver:'smtp',
            mail_host:'smtp.mailtrap.io',
            mail_port:'2525',
            mail_username:'null',
            mail_password:'null',
            mail_encryption:'null',
            permissions:false,
            code_verifying:false,
            verified:false,
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            contents: '',
            artisan_output:'',
            installing:false,
            checked:'/images/checked.png',
            remove:'/images/remove.png'
        }
    },
    mounted(){
        // console.log("this.$route.name");
        // console.log(this.$route.name);
        // console.log(window.axios.defaults.baseURL);
        this.fetch_server_details();
        this.app_url = localStorage.getItem('tmp_url');
        this.checked = this.app_url+'/images/checked.png';
        this.remove = this.app_url+'/images/remove.png';
    },
    methods:{
        async submit(){
          this.installing = true;
            // console.log('submit button called');
            // install/submit
            await axios.post('api/install/submit',{
                app_name : this.app_name,
                app_env: this.app_env,
                app_debug: this.app_debug,
                app_url: this.app_url,
                db_connection: this.db_connection,
                db_host: this.db_host,
                db_port: this.db_port,
                db_database: this.db_database,
                db_username: this.db_username,
                db_password: this.db_password,
                mail_driver: this.mail_driver,
                mail_host: this.mail_host,
                mail_port: this.mail_port,
                mail_username: this.mail_username,
                mail_password: this.mail_password,
                mail_encryption: this.mail_encryption,
            }).then((res) => {
                this.$store.dispatch('update_contents', res.data.contents);
                this.$store.dispatch('update_artisan_op', res.data.artisan_op);
                this.installing=false;
                this.$emit('update_step_clicked', 3);
            });
        },
        async verify_purchase_code(){
            if(this.purchase_code == ''){
                return alert('Please enter your purchase code!');
            }
            this.code_verifying = true;
            // 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 = 'https://docs.devpremier.com/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 => {
                if(res.verification == 'success') {
                    this.verified = true;  
                }else{
                  // console.log('res');
                  // console.log(res);
                  this.verified = false;  
                    alert(res.message)
                }

                this.code_verifying = false;
            })
            .catch(err => { 
                this.code_verifying = false;
            });
        },
        async fetch_server_details(){
            this.loading = true;
            await axios.get('/api/server_details')
            .then((res) => {
                this.server_details = res.data.server_details
                if (
                    (this.server_details.stg_logs_permission >= '0755') && 
                    (this.server_details.stg_framework_permission >= '0755') && 
                    (this.server_details.stg_app_permission >= '0755') && 
                    (this.server_details.bootstrap_permission >= '0755')
                    ) {
                    this.permissions = true;
                }
                this.loading = false;
            });
        },

    }
}


</script>

<style scoped>
.border-dark{
  border: 1 px solid gray;
}
</style>