<template>
  <div>
    <!-- Evaluations block start -->
     
    <div class="d-flex justify-content-between align-items-center">
      <h4>Evaluations</h4>
      <a  v-if="userEvaluations.length > 0" href="javascript:;" data-toggle="modal" data-target="#evaluationCriteria" class="border-bottom"><small>View Evaluation Criteria</small></a>
    </div>
    <div v-if="userEvaluations.length > 0 || this.missingEvaluationFor.length > 0 || userEvaluationCount > 0 ">  
      <div class="row mt-4">  
        <div class="col-md-12">
          <table  class="table bordered">
            <thead>
              <tr>
                <th>Name</th>
                <th>Language Direction</th>
                <th>Duration</th>
                <th>Status</th>
                <th>Score</th>
                <th class="text-right">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="data in userEvaluations" >
                <td>{{data.evaluation_name}}</td>
                <td>{{data.from_language}} to {{data.to_language}}</td>
                <td>{{data.duration}} Mins</td>
                <td>
                  <span  v-bind:class="[ data.css_class, 'capsule']">
                    {{  data.status_name || 'Pending' }}
                  </span>
                </td>
                <td>
                  <span v-if="data.evaluation_status_id > 2" >{{data.user_total_score}} out of {{data.total_score}}</span>
                  <span v-else >--</span>
                </td>
                <td class="text-right">
            
                  <a v-if="data.evaluation_status_id == null || data.evaluation_status_id == 1" href="javascript:;" data-toggle="modal" data-target="#newTest" class="btn btn-primary" 
                   @click="openEvaluationsModel(data.id)">Start</a>

                  <a v-if="data.evaluation_status_id > 1" href="javascript:;" data-toggle="modal" data-target="#viewTest" @click="openEvaluationsViewModel(data.id)" >View</a>
                </td>
              </tr>
              <tr v-for="data in missingEvaluationFor">
                <td>Test not available</td>
                <td>{{data.from_language}} to {{data.to_language}}</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td class="text-right">-</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div v-else class="no-record text-center">
      <img :src="`/images/shape.png`" width="100"><br><br>
      <p>No Evaluations Exist</p>
    </div>
    <!-- Evaluations block end -->
   
    <!-- Evaluation Criteria model start -->
    <div class="modal fade" id="evaluationCriteria" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="">Evaluation Criteria</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <table class="table table-bordered black-text table-sm mb-0">
              <thead>
              <tr>
              <th width="10%" data-field="id">Criteria</th>
              <th width="55%" data-field="name">Explanation and deductible items</th>
              <th width="5%" data-field="price">Score</th>
              <th width="30%" data-field="total">For each mistake in any of the items under the criteria (designed for a text of 300-400 words)</th>
              </tr>
              </thead>
              <tbody>
              <tr>
              <td>Semantics</td>
              <td>The translator is able to convey the full meaning of SL into TL (no deletion, no addition, no change of meaning, no ambiguity.) Interpretation of TL is the same as that of SL.</td>
              <td><b>150</b></td>
              <td>Deduct 10 for each mistake.</td>
              </tr>
              <tr>
              <td>Terminology</td>
              <td>
              <b>1)</b> Correct usages and choices of words as to convey the meaning correctly (ex: boy, man, male)<br>
              <b>2)</b> No lexical ambiguity<br>
              <b>3)</b> Using correct jargons when necessary that fit the context and the audience
              </td>
              <td><b>50</b></td>
              <td>Deduct 5 for each mistake.</td>
              </tr>
              <tr>
              <td>Syntax</td>
              <td>- Correct and clear usage of:<br>
              <b>1)</b> Grammar (tenses, conditionality, modality.etc.)<br>
              <b>2)</b> Spelling, especially for Arabic: (lam Shamsia wal kamaria, ha’a wat aa marbota, tanween)<br>
              <b>3)</b> Punctuation<br>
              <b>4)</b> Sentence structure:<br>
              <b>a)</b> Making sure that there is no ambiguity in sentence structure<br>
              <b>b)</b> Using correct sentence structure in Arabic (like using verbal sentences whenever suitable)
              <b>c)</b>Correct conjunctions</td>
              <td><b>150</b></td>
              <td>Deduct 10 for each
              mistake. (if mistakes
              are within the same
              category, consider it
              one)</td>
              </tr>
              <tr>
              <td>Stylistic quality</td>
              <td>
              <b>1)</b> Suitable expressions<br>
              <b>2)</b> Correct usage of translation methods (literal, semantic..)<br>
              <b>3)</b> Correct usage of numbering and equivelances in Arabic (Abjad Hawaz) and text/slide direction<br>
              <b>4)</b> No repetition<br>
              <b>5)</b> Translation fits culture and audience (expert/inexpert). Marks will be deducted for expressions, terms, or style not suitable for the audience or culture.</td>
              <td><b>100</b></td>
              <td>Deduct 5 for each mistake. (if mistakes are within the same category, consider it one)</td>
              </tr>
              <tr>
              <td>Stylistic beauty and cultural style</td>
              <td>
              - Beauty of text such as:<br>
              <b>1)</b> Text coherence, and connection of ideas<br>
              <b>2)</b> Readability and clarity<br>
              <b>3)</b> The translation sounds authentic in TL.<br>
              <b>4)</b> Style of translation fits the context (media,
              legal. etc.)</td>
              <td><b>50</b></td>
              <td>Subjective evaluation</td>
              </tr>
              <tr>
              <td colspan="4"><b>Total: 500</b></td>
              </tr>
              </tbody>
              </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
           
          </div>
        </div>
      </div>
    </div>
    <!-- Evaluation Criteria model end -->
  
    <!-- Test model start -->
    <div  class="modal fade" id="newTest" tabindex="-1" role="dialog" aria-hidden="true" ref="testModalRef"  @click.self="closeEvaluationsModel" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="">{{this.evaluation_name}}</h5>
            <countdown  :time="this.time_expend" :auto-start="false" @end="handleCountdownEnd" 
              ref="countdown">
                <template slot-scope="props">
                <strong> {{ props.hours }}:{{ props.minutes }}:{{ props.seconds }} </strong>
                </template>
            </countdown>
          </div>
          <div v-if="this.show_instructions">
            <div class="modal-body">
              <h4 class="mb-4">Instructions</h4>
              <span v-html="this.instructions" >  </span>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-dismiss="modal" @click="closeEvaluationsModel" >Start Later</button>
              <button type="button" class="btn btn-primary" @click="showTestBlock()">Start Test Now</button>
            </div>
          </div>
          <div v-else>
            <form autocomplete="off" @submit.prevent="insertUserEvaluation" v-if="!success" method="post">
              <input type="hidden" v-model="this.evaluation_id"  />
              <div class="modal-body">
                <div class="row">
                 <div class="col-md-6 border-right">
                   <p><strong>{{this.evaluation_from}} to {{this.evaluation_to}}</strong></p>
                    <a v-if="this.evaluation_file" download :href="`docs/evaluation_file/${this.evaluation_file}`" class="mb-12" > <b>Download Test File</b> </a>
                    <div v-bind:class="['mt-2']">
                      <div v-html=this.evaluation_text></div>
                    </div>
                 </div>
                 <div class="col-md-6">
                  <div class="col-md-12">
                    <label for="answer_file">Upload File <small>(Max upload file size: 2 MB. Allowed file types: pdf)</small></label>
                    <input id="answer_file" type="file" v-on:change="onEvaluationFileChange" class="form-control mb-12" />
                    <span class="text-danger help-block" v-if="has_error && errors.answer_file">{{ errors.answer_file[0] }}</span>
                  </div>
                  <div class="col-md-12" v-if="this.evaluation_file == null">
                    <label>Type Answer</label>
                    <ckeditor :editor="editor" v-model="evaluation_answer" :config="editorConfig"></ckeditor>
                    <span v-if="this.evaluation_file == null"><span class="text-danger help-block" v-if="has_error && errors.answer">{{ errors.answer[0] }}</span></span>
                  </div>
                 </div>
               </div>
              </div>
              <div class="modal-footer">
                <button type="button" :disabled='isLoading' class="btn btn-light dismiss_modal" data-dismiss="modal" @click="closeEvaluationsModel" >Close</button>
                <VueLoadingButton type="submit" aria-label="Submit" class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
                  Submit
                </VueLoadingButton>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- Test model end -->

    <!-- Test view model start -->
      <div  class="modal fade" id="viewTest" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="">{{this.evaluationView.evaluation_name}} 
                <span v-bind:class="[ this.evaluationView.css_class, 'capsule']">
                  {{this.evaluationView.status_name}}
                </span>
              </h5>
              <span class=""><strong>{{this.evaluationView.time_expend}}</strong> / {{this.evaluationView.duration}} Min</span>
            </div>
            <!-- <div class="modal-score"> -->
            <div :class="this.evaluationView.css_class == 'done'?'evaluation-done':(this.evaluationView.css_class == 'review'?'evaluation-review':'evaluation-improvement')">
              <div class="row">
                <table class="table table-bordered black-text table-sm mb-0">
                  <thead>
                    <th>Semantics</th>
                    <th>Terminology</th>
                    <th>Syntax</th>
                    <th>Stylist Quality</th>
                    <th>Stylist Beauty & Cultural Style</th>
                    <th>Total</th>
                  </thead>
                  <tbody>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_semantic_score}}/</big>{{this.evaluationView.semantic_score}}</span>
                      <span v-else>N/A</span>
                    </td>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_terminology_score}}/</big>{{this.evaluationView.terminology_score}}</span>
                      <span v-else>N/A</span>
                    </td>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_syntax_score}}/</big>{{this.evaluationView.syntax_score}}</span>
                      <span v-else>N/A</span>
                    </td>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_quality_score}}/</big>{{this.evaluationView.quality_score}}</span>
                      <span v-else>N/A</span>
                    </td>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_beauty_score}}/</big>{{this.evaluationView.beauty_score}}</span>
                      <span v-else>N/A</span>
                    </td>
                    <td>
                      <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.userTotalScore}}/</big>{{this.totalScore}}</span>
                      <span v-else>N/A</span>
                    </td>
                  </tbody>
                </table>
                <!-- <div class="col">
                  <div class="score">
                    <small>Semantics</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_semantic_score}}/</big>{{this.evaluationView.semantic_score}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div>
                <div class="col">
                  <div class="score">
                    <small>Terminology</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_terminology_score}}/</big>{{this.evaluationView.terminology_score}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div>
                <div class="col">
                  <div class="score">
                    <small>Syntax</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_syntax_score}}/</big>{{this.evaluationView.syntax_score}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div>
                <div class="col">
                  <div class="score">
                    <small>Stylist Quality</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_quality_score}}/</big>{{this.evaluationView.quality_score}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div>
                <div class="col">
                  <div class="score">
                    <small>Stylist Beauty & Cultural Style</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_beauty_score}}/</big>{{this.evaluationView.beauty_score}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div>
                <div class="col">
                  <div class="score">
                    <small>Total</small>
                    <span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.userTotalScore}}/</big>
                    {{this.totalScore}}</span>
                    <span v-else>N/A</span>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="modal-body">
             <div class="row mt-4">
               <div class="col-md-6 border-right">
                 <p><strong>{{this.evaluationView.from_language}} to {{this.evaluationView.to_language}} </strong></p>
                  <a v-if="this.evaluationView.evaluation_file" download :href="`docs/evaluation_file/${this.evaluationView.evaluation_file}`" class="mb-12" > <b>Download Test File </b></a> 
                 <div class="mt-2">
                  <div v-html=this.evaluationView.evaluation_text></div>
                 </div>
               </div>
               <div class="col-md-6">
                <p><strong>Answer</strong></p>
                <a v-if="this.evaluationView.answer_file" download :href="`docs/evaluation_answer_file/${this.evaluationView.answer_file}`" class="mb-12" ><b> Download Answer File</b></a>
                <div v-html=this.evaluationView.answer></div>
               </div>
             </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    <!-- Test view model end -->
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  export default {
    components: {  Multiselect  },
    data() {
      return {
        has_error: false,
        error: '',
        errors: {},
        success: false,
        isLoading: false,
        isStyled: false,

        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {},

        show_instructions: true,
        evaluation_id:'',
        evaluation_name: '',
        instructions:'', 
        evaluation_answer:'',
        evaluation_from: '',
        evaluation_to: '',
        evaluation_text: '',
        evaluation_file: '',
        answer_file: '',
        evaluation_text_class: '',
        duration:0,
        time_expend:0,
      
        userEvaluations:[],
        userEvaluationCount:0,
        userEvaluationsShow:[],
        evaluationView:{},
        missingEvaluationFor:[],

        userTotalScore:'',
        totalScore:'',

        time: 0,
        isRunning: false,
        interval: null,
      }
    },

    mounted() {
      this.getUserEvaluations()
      this.$root.$on("getUserEvaluations", () => {
        return this.getUserEvaluations();
      });
    },
    methods: {
      /**
       * Fetch user skills data and put in userSkills variable. 
       *
       * @param null
       * @return null
      */
      getUserEvaluations() 
      {
        this.$http({
          url: `api/getUserEvaluations`,
          method: 'GET'
        })
          .then((res) => {
            this.userEvaluations = res.data.userEvaluations
            this.userEvaluationCount = res.data.userEvaluationCount
            this.userEvaluationsShow = this.userEvaluations.slice(); 
            this.missingEvaluationFor = res.data.missingEvaluationFor
          }, () => {
            this.has_error = true
          })
      },

      /**
       * Add user Evaluation. 
       *
       * @param null
       * @return null
      */
      insertUserEvaluation() {
        this.isLoading = true;
        this.$refs.countdown.abort();
        let time_expend = this.duration - this.$refs.countdown.totalMinutes ;
        let formUserEvaluation = new FormData();
        formUserEvaluation.append('answer', this.evaluation_answer);
        formUserEvaluation.append('evaluation_id', this.evaluation_id);
        formUserEvaluation.append('time_expend', time_expend ); 
        formUserEvaluation.append('answer_file', (this.answer_file != undefined) ? this.answer_file :'' );
        formUserEvaluation.append('evaluation_file', this.evaluation_file ); 
        const config = {
            headers: { 'content-type': 'multipart/form-data' }
        }
        this.$http({
          config:config , 
          url: `api/insertUserEvaluation`,
          method: 'POST',
          data: formUserEvaluation 
        })
        .then((res) => {
          this.userEvaluations = res.data.userEvaluations
          this.userEvaluationCount = res.data.userEvaluationCount
          this.userEvaluationsShow = this.userEvaluations.slice(); 

          let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
          this.$emit('updateStatus', status)

          this.has_error = false
          app.success = true
          this.error = ''
          this.errors = {}
          this.isLoading = false
          this.$snotify.success( res.data.message);
          $('.modal').modal('hide')
        })
        .catch(err => {
          this.isLoading = false
          this.has_error = true
          app.success = false
          this.error = err.response.data.error
          this.errors = err.response.data.errors || {}
          if(err.response.data.showErrorPop)
          {
            this.$snotify.error(err.response.data.message);
          } 
        });
      },
      

      /**
       * Open Evaluations model.
       *
       * @param null
       * @return null
      */
      openEvaluationsModel(evaluation_id) {
        this.answer_file = ''
        $("#answer_file").val(null)
        this.show_instructions = true
        let evaluation = this.userEvaluations.filter(function(evaluation) {
          return evaluation.id == evaluation_id ;
        });
        evaluation = evaluation[0]
        this.evaluation_id = evaluation.id 
        this.evaluation_name = evaluation.evaluation_name
        this.instructions = evaluation.instructions
        this.evaluation_from = evaluation.from_language
        this.evaluation_to = evaluation.to_language
        this.evaluation_answer = ''
        this.evaluation_text = evaluation.evaluation_text
        this.evaluation_file = evaluation.evaluation_file 
        this.evaluation_text_class = evaluation.evaluation_text_class
        this.duration = evaluation.duration
        this.time_expend = ( evaluation.duration * 60 * 1000 )
        this.$refs.countdown.time = evaluation.duration;
      },

      /**
       * Open evaluations vue model.
       *
       * @param null
       * @return null
      */
      openEvaluationsViewModel(evaluation_id) {
        let evaluation = this.userEvaluations.filter(function(evaluation) {
          return evaluation.id == evaluation_id ;
        });
        evaluation = evaluation[0]
        this.evaluationView = evaluation
        this.userTotalScore = ''
        if(this.evaluationView.evaluation_status_id > 2)
        {
          this.userTotalScore  = parseInt(this.evaluationView.user_semantic_score) + 
          parseInt(this.evaluationView.user_terminology_score) +
          parseInt(this.evaluationView.user_syntax_score) +
          parseInt(this.evaluationView.user_quality_score) +
          parseInt(this.evaluationView.user_beauty_score) ;
        }
        this.totalScore  = parseInt(this.evaluationView.semantic_score) + 
        parseInt(this.evaluationView.terminology_score) +
        parseInt(this.evaluationView.syntax_score) +
        parseInt(this.evaluationView.quality_score) +
        parseInt(this.evaluationView.beauty_score) ;
      },

      /**
       * Hide instructions and show test block .
       *
       * @param null
       * @return null
      */  
      showTestBlock() {
        this.show_instructions = false
        this.startCountdown()
      },
      /**
       * Close Evaluations model. 
       *
       * @param null
       * @return null
      */
      closeEvaluationsModel() {
        this.$refs.countdown.abort();
        this.$refs.countdown.end();

        this.has_error = false
        app.success = true
        this.error = ''
        this.errors = {}
        this.isLoading = false
      },

      /**
       * Start Countdown. 
       *
       * @param null
       * @return null
      */
      startCountdown: function () {
        this.$refs.countdown.start();
      },
      /**
       * Handle Countdown End. 
       *
       * @param null
       * @return null
      */
      handleCountdownEnd: function () {
      },
      
      /**
       * Set selected file to answer_file variable 
       *
       * @param null
       * @return null
      */
      onEvaluationFileChange(e){
        this.answer_file = e.target.files[0];
      },
    }
  }
</script>
<style>
.ck-content {
  min-height: 300px!important;
}
</style>