<template>
  <div>
    <!-- Availability block start -->
    <div class="d-flex justify-content-between align-items-center">
      <h4>Availability</h4>
    </div>
    <div v-if="this.userShow.translator_status_id > 5" class="mt-4">  
      <table class="table table-avb">
        <thead>
          <tr class="text-center">
            <th></th>            
            <th >
              Monday
            </th>
            <th>
              tuesday
            </th>
            <th>
              Wednesday
            </th>
            <th>
              Thurday
            </th>
            <th>
              Friday
            </th>
            <th>
              Saturday
            </th>
            <th>
              Sunday
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="data in userDayTimeSlotsPivote" class="text-center">
            <th class="text-left">{{data.time_slot_name}}</th>
            <td><input type="checkbox" :vlaue="data.day_id_1" :checked="data.day_id_1"
            :class="`chk_day_slot_${data.time_slot_id}_1`"
            @click="updateUserAvailability(data.time_slot_id,1)" ></td>
            <td><input type="checkbox" :vlaue="data.day_id_2" :checked="data.day_id_2" :class="`chk_day_slot_${data.time_slot_id}_2`" @click="updateUserAvailability(data.time_slot_id,2)"></td>
            <td><input type="checkbox" :vlaue="data.day_id_3" :checked="data.day_id_3" :class="`chk_day_slot_${data.time_slot_id}_3`" @click="updateUserAvailability(data.time_slot_id,3)"></td>
            <td><input type="checkbox" :vlaue="data.day_id_4" :checked="data.day_id_4" :class="`chk_day_slot_${data.time_slot_id}_4`" @click="updateUserAvailability(data.time_slot_id,4)"></td>
            <td><input type="checkbox" :vlaue="data.day_id_5" :checked="data.day_id_5" :class="`chk_day_slot_${data.time_slot_id}_5`" @click="updateUserAvailability(data.time_slot_id,5)"></td>
            <td><input type="checkbox" :vlaue="data.day_id_5" :checked="data.day_id_6" :class="`chk_day_slot_${data.time_slot_id}_6`" @click="updateUserAvailability(data.time_slot_id,6)"></td>
            <td><input type="checkbox" :vlaue="data.day_id_7" :checked="data.day_id_7" :class="`chk_day_slot_${data.time_slot_id}_7`" @click="updateUserAvailability(data.time_slot_id,7)"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else class="row mt-4">        
      <div class="col-md-12">
        <div class="no-record text-center">
          <img :src="`/images/shape.png`" width="100">
          <br><br>
          <p>Disabled until the completion of evaluations</p>
        </div>
      </div>
    </div>
    <!-- Availability block end -->
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect';
  export default {
    props: ['userShow','userDayTimeSlotsPivote'],
    components: {  Multiselect  },
    data() {
      return {
        has_error: false,
        error: '',
        errors: {},
        success: false,
        isLoading: false,
        isStyled: false,
      }
    },
     mounted() {
      //this.getUserDayTimeSlotsPivote()
    },

    methods: {

      /**
       * Fetch days and put in days variable. 
       *
       * @param null
       * @return null
      */
      getUserDayTimeSlotsPivote() 
      {
        this.$http({
          url: `api/getUserDayTimeSlotsPivote`,
          method: 'GET'
        })
          .then((res) => {
            this.userDayTimeSlotsPivote = res.data.userDayTimeSlotsPivote 
          }, () => {
            this.has_error = true
          })
      },
      /**
       * Upadte days and put in days variable. 
       *
       * @param null
       * @return null
      */
      updateUserAvailability(time_slot_id,day_id) 
      {
        this.isLoading = true;
        let operation = 'delete';
        if( $('.chk_day_slot_'+time_slot_id+'_'+day_id).is(":checked") )
        {
          operation = 'insert';
        }
        let form = new FormData();
        form.append('time_slot_id', time_slot_id);
        form.append('day_id', day_id);
        form.append('operation', operation); 
        const config = {
            headers: { 'content-type': 'multipart/form-data' }
        }
        this.$http({
          config:config , 
          url: `api/updateUserAvailability`,
          method: 'POST',
          data: form 
        })
        .then((res) => {
          //this.userEvaluations = res.data.userEvaluations
          this.has_error = false
          app.success = true
          this.error = ''
          this.errors = {}
          this.isLoading = false
  
          this.$snotify.success( res.data.message);
          $( ".dismiss_modal" ).trigger( "click" );
        })
        .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);
          } 
        });
      },
      
    }
  }
</script>