<template>
 <v-layout>



 <v-flex xs12 >
       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
         <v-toolbar  color="blue lighten-3" dark height="50px">
           <v-toolbar-title>HARI</v-toolbar-title>
           <v-spacer></v-spacer>

         </v-toolbar>

<v-layout row  style="background:#bbdefb;padding-top:5px;" justify-left>

          </v-layout>
          <v-divider></v-divider>
          <div  v-for="(vs,index) in vdays" >

                <v-layout pa-2 v-if="isSelected(vs)" row>
                <v-flex xs12 @click="selectMe(vs)"  >
                  <v-layout row>
                    <v-flex class="boxsolid"  xs12>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-html="subname(vs.description)" v-on="on"></span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </v-flex>

                  </v-layout>
                </v-flex>
                </v-layout>



                <v-layout pa-2 v-if="!isSelected(vs)" row>
                <v-flex xs12 @click="selectMe(vs)"  >
                  <v-layout row>
                    <v-flex class="boxoutline"  xs12>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-html="subname(vs.description)" v-on="on"></span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </v-flex>

                  </v-layout>
                </v-flex>
                </v-layout>
          <v-divider></v-divider>
          </div>



          <template>
            <v-layout row justify-center>
              <v-dialog v-model="dialogday" persistent max-width="600px">
                <v-card>
                  <v-card-title>
                    <span class="headline">Form day</span>
                  </v-card-title>
                  <v-card-text class="pt-0 pb-0">
                  <v-form
                      ref="formday"
                      v-model="valid"
                      lazy-validation
                    >
                    <v-layout wrap>
					    <v-flex xs12>
                          <v-text-field v-model="daycode" label="Kode" :rules="codeRules" required></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field v-model="dayname" label="Nama" :rules="nameRules" required></v-text-field>
                        </v-flex>


                          <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                        </v-flex>
                    </v-layout>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="updateDialogFormDay()">Tutup</v-btn>
                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormDay()">Simpan</v-btn>
                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormDay()">Simpan Perubahan</v-btn>
                  </v-card-actions>
                  </v-form>
                </v-card>
              </v-dialog>
            </v-layout>
          </template>

       </v-card>
     </v-flex>
</v-layout>
</template>

<style scoped>
.textinput {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #607d8b;

}

.textinput:focus {
  width: 100%;
}
.textinput:focus::-webkit-input-placeholder  {color:transparent;}
.textinput:focus::-moz-placeholder   {color:transparent;}
.textinput:-moz-placeholder   {color:transparent;}
.boxoutline{
  color:red;border:1px solid red;justify-content:center;height: 45px;
  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
    font-weight: 500;border-radius:1px
}
.boxoutline:hover{
  background:rgba(0, 0, 0, 0.07)!important;
  font-size: 15px;
  font-weight: 700;
}

.boxsolid{
  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
    font-weight: 500;border-radius:1px
}
.boxsolid:hover{
  background:#f44336de;
  font-size: 15px;
  font-weight: 700;
}
.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
      width: 7px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
      background-color: #73baf3;
} /* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
      background-color: #2196f3;
} /* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
      background-color: #0079da;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

</style>

<script>
module.exports = {
  data: () => ({
      color:"success",
      valid:false,
      dayname:'',
      daycode:'',
      nameRules: [
        v => !!v || 'Nama harus diisi'
      ],
      codeRules: [
        v => !!v || 'Code harus diisi'
      ],
      dialogdeletealert:false,
      msgalert:"",
      xid:0,
      xsearch:""
    }),
  mounted() {

      this.$store.dispatch("day/lookup",{search:this.xsearch,all:this.xshowall})
  },
  computed: {
      xact() {
          return this.$store.state.day.act
      },
      xerrors() {
          return this.$store.state.day.errors
      },
      xshowall() {
          return this.$store.state.day.show_all
      },
      vdays() {
          return this.$store.state.day.sdays
      },
      xtotaldays(){
        return this.$store.state.day.total_days
      },
      xtotalfilterdays(){
        return this.$store.state.day.total_filter_days
      },
      dialogday(){
        return this.$store.state.day.dialog_form_day
      },
      snackbar: {
         get() {
            return this.$store.state.day.alert_success
         },
         set(val) {
            this.$store.commit("day/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.day.msg_success
      },
      lookupstatus(){
        return this.$store.state.day.lookup_day
      }

  },
  methods : {
    updateShowAll(val){
      this.$store.commit("day/update_show_all",val)
       this.$store.dispatch("day/lookup",{search:this.xsearch,all:this.xshowall})
    },
    isSelected(p) {
        return p.id ==  this.$store.state.day.selected_day.id
    },
    subname(name){
      var xname = name
      if(xname.length > 40){
        xname = xname.substring(0, 40)+'...'
      }
      return xname
    },
    selectMe(sc) {
        this.$store.commit("day/update_selected_day",sc)
        this.$store.dispatch("bahan/lookup",{
          id:this.$store.state.day.selected_day.id
        })
    },
    updateDialogFormDay(){
       this.$store.commit("day/update_dialog_form_day",false)
    },
    openFormDay(){
      this.$refs.formday.reset()
      this.$refs.formday.resetValidation()
      this.$store.commit("day/update_act",'new')
      this.$store.commit("day/update_error_code",false)
      this.$store.commit("day/update_error_name",false)
      this.$store.commit("day/update_dialog_form_day",true)
    },
    saveFormDay(){
      if (this.$refs.formday.validate()) {
          this.$store.dispatch("day/save",{

            name:this.dayname,
            code:this.daycode,

         })
      }
    },
    updateFormDay(){
      if (this.$refs.formday.validate()) {
          this.$store.dispatch("day/update",{
            id:this.xid,
             name:this.dayname,
            code:this.daycode,
         })

      }
    },
    updateAlert_success(val){
      this.$store.commit("day/update_alert_success",val)
    },
    editDay(data){
      this.xid = data.id

      this.dayname = data.name
      this.daycode = data.code
      this.$store.commit("day/update_act",'edit')
      this.$store.commit("day/update_error_name",false)
      this.$store.commit("day/update_error_code",false)
      this.$store.commit("day/update_dialog_form_day",true)
    },
    deleteDay(data){
      this.xid = data.id
      var xdata = {id:data.id,name:data.name,users:'xxx'}
      this.$store.commit("day/update_selected_day",xdata)
      this.msgalert =  "Yakin, mau hapus day "+data.name+"  ?"
      this.dialogdeletealert = true
    },
    closeDeleteAlert(){
      this.$store.dispatch("day/delete",{
            dayid:this.$store.state.day.selected_day.id,
            dayname:this.$store.state.day.selected_day.name
          })
      this.dialogdeletealert = false
    },
    thr_search: _.debounce( function () {
        this.$store.dispatch("day/lookup",{search:this.xsearch,all:this.xshowall})
    },1000)
  },
  watch: {
      xsearch(val,old) {
        if ( val !== old && this.lookupstatus !== 1){
          console.log(val)
          this.xsearch = val
          this.thr_search()
        }
      }
   }
}
</script>
