<template>
  <div>
    <!-- User software & tools  block start -->
    <div class="card">
      <div v-if="userSoftwareToolCount > 0">
        <div class="card-header">
          <strong>Software & Tools</strong>
          <div class="actions">
            <a href="javascript:;" data-toggle="modal" data-target="#editUserSoftwareTool" class="ml-1">
             <i class="fa fa-pencil" />
            </a>
          </div>
        </div>
        <div class="card-body">

          <div v-for="software, i in softwares" class=""> 
            <div v-if="software.userSoftwareCount > 0" style="margin-bottom: 20px;"  >
              <span>{{software.software}}:<br></span>
              <span v-for="userSoftwareTools, j in userSoftwareTools" v-if="software.id == userSoftwareTools.software_id && userSoftwareTools.user_id > 0" class="capsule" style="margin-right: 5px;">
                {{userSoftwareTools.tool}}
              </span>
            </div> 
           
          </div>

        </div>
      </div>
      <div v-else>
        <div class="card-header">
          <strong> Software & Tools</strong> 
        </div>
        <div class="card-body text-center">
          <img :src="`/images/tools.png`" width="80" style="opacity: 0.6"><br><br>
          <a href="javascript:;" class="btn btn-secondary mb-4" data-toggle="modal" data-target="#editUserSoftwareTool">Add Software & Tools</a>           
        </div>
      </div>
    </div> 
    <!-- User software & tools  block end -->

    <!-- Add/Edit Software tool model start -->
    <div  @click.self="closeUserSoftwareToolModel" class="modal fade dismiss_modal" 
      id="editUserSoftwareTool" 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="">Software & Tools</h5>
            <button @click="closeUserSoftwareToolModel" type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form @submit.prevent="updateUserSoftwareTools">
            <div class="modal-body">
              <div class="row">          
                <div class="col-md-12">
      
                    <div v-for='software in softwares'  class="row align-items-center">          
                      <div class="col-md-11">            
                        <div class="form-group">
                          <label>
                            <strong>{{software.software}}</strong>
                          </label>
                          <multiselect  track-by="name"  label="name"  v-model="software_tool_ids[software.id]" :options=getUserToolOfsoftwar(software.id)  :multiple="true"  placeholder="Select Software Tool" selectLabel='' deselectLabel='X' selectedLabel=''></multiselect>
                        </div>
                      </div>      
                    </div>
                </div>             
              </div>
            </div>
            <div class="modal-footer">
              <button @click="closeUserSoftwareToolModel" type="button" class="btn btn-light dismiss_modal" data-dismiss="modal">Close</button>
              <VueLoadingButton type="submit" aria-label="Save changes" 
                class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
                Save changes
              </VueLoadingButton>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- Add/Edit Software tool model end -->
  
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect';
  export default {
    components: { Multiselect },
    data() {
      return {
        isLoading: false,
        isStyled: false,
        softwares: [],
        software_tools: [],
        software_tool_ids:[],
        userSoftwareTools: [],
        userSoftwareToolCount:0,
      }
    },

    mounted() {
      this.getSoftwareTools()
      this.getUserSoftwareTools()
    },

    methods: {
      /**
       * Fetch software tools list and put in software_tools variable. 
       *
       * @param null
       * @return null
      */
      getSoftwareTools() {
        this.$http({
          url: `getSoftwareTools`,
          method: 'GET'
        })
          .then((res) => {
            this.software_tools = res.data.software_tools
          }, () => {
            this.has_error = true
          })
      },
      /**
       * Fetch user software tools  and put in userSoftwareTools variable. 
       *
       * @param null
       * @return null
      */
      getUserSoftwareTools() {
        this.$http({
          url: `getUserSoftwareTools`,
          method: 'GET'
        })
          .then((res) => {
          this.softwares = res.data.userSoftwareCount
          this.userSoftwareTools = res.data.userSoftwareTools
          this.userSoftwareToolCount = res.data.userSoftwareToolCount
          this.software_tool_ids = []
          this.software_tool_ids.push( [] );
          for(let i = 0 ;  i <= this.softwares.length  ; i++ )
          {
            let x = []
            x.push(  );
            for(let j = 0; j < res.data.userSoftwareTools.length ; j++)
            {
              if(this.softwares[i] && this.softwares[i].id == res.data.userSoftwareTools[j].software_id &&  res.data.userSoftwareTools[j].user_id  != null )
              {
                x.push( {id:res.data.userSoftwareTools[j].software_tool_id,name:res.data.userSoftwareTools[j].tool} );
              }
            }
            this.software_tool_ids.push( x );
          }
          }, () => {
            this.has_error = true
          })
      },
      /**
       * Upate user software tools.  
       *
       * @param null
       * @return null
      */
      updateUserSoftwareTools() {
        this.isLoading = true
        let formUserSoftwareTool = new FormData();  
        for(let i = 0 ;  i < this.software_tool_ids.length  ; i++ )
        {
          if(this.software_tool_ids[i] != undefined)
          {
            for(let j = 0 ;  j < this.software_tool_ids[i].length  ; j++ )
            {
              formUserSoftwareTool.append('software_tool_id[]', this.software_tool_ids[i][j].id);
            }
          }
        }
        const config = {
            headers: { 'content-type': 'multipart/form-data' }
        }
        
        this.$http({
          config:config , 
          url: `updateUserSoftwareTools`,
          method: 'POST',
          data: formUserSoftwareTool 
        })
        .then((res) => {
          this.userSoftwareTools = res.data.userSoftwareTools
          this.userSoftwareToolCount = res.data.userSoftwareToolCount
          this.softwares = res.data.userSoftwareCount
          this.isLoading = false
          this.$snotify.success( res.data.message);
          $( ".dismiss_modal" ).trigger( "click" );
        })
        .catch(err => {
          this.has_error = true
          app.success = false
          this.isLoading = false
          this.error = err.response.data.error
          this.errors = err.response.data.errors || {}
          this.$snotify.error(err.response.data.message);
        });
      },
      /**
       * Close user software tool model
       *
       * @param null
       * @return null
      */
      closeUserSoftwareToolModel() {
        this.getUserSoftwareTools()
      },
      /**
       * Fetch softwar tool for given software_id . 
       *
       * @param software_id
       * @return selection
      */
      getUserToolOfsoftwar(software_id) {
        var selection = []
        for (var i = 0; i <  this.software_tools.length  ; i++) {
          if(this.software_tools[i].software_id == software_id)
          {
            selection.push({ id: this.software_tools[i].id , name: this.software_tools[i].tool });
          }
        }
        return selection 
      },
    }
  }
</script>