<template>
 <v-layout v-if="xispreschedule === 'N'">
 <v-flex xs12 >
 <v-card  class="mb-2" color="white"  >
   <v-toolbar  color="blue lighten-3" dark height="50px">
     <v-toolbar-title>PROMISE TEST : {{xschedules.name}}</v-toolbar-title>
     <v-spacer></v-spacer>
     <v-btn @click="openFormSchedulePromise(0)" icon>
       <v-icon>library_add</v-icon>
     </v-btn>
   </v-toolbar>


<v-layout row wrap>
                  <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
                        <table>
                           <tr>
                              <th width="23%" class="text-md-center pt-2 pb-2">HARI ( DALAM MINGGU )</th>
                              <th  width="12%" class="text-md-center pt-2 pb-2"> MULAI PENGERJAAN </th>
                              <th width="12%" class="text-md-center pt-2 pb-2">AKHIR PENGERJAAN</th>
                              <th width="9%" class="text-md-center pt-2 pb-2">HARI</th>
                              <th width="9%" class="text-md-center pt-2 pb-2">JAM</th>
                              <th width="9%" class="text-md-center pt-2 pb-2">MENIT</th>
                              <th width="10%" class="text-md-center pt-2 pb-2">PADA JAM</th>
                              <th  class="text-md-center pt-2 pb-2">AKSI</th>
                           </tr>
                           <tr v-if="promises.length > 0 " v-for="(promise,idx) in promises">
                              <td class="text-md-left pl-3">{{promise.dayofweekname}}</td>
                              <td class="text-md-center">{{promise.start_hm}}</td>
                              <td class="text-md-center">{{promise.end_hm}}</td>
                              <td class="text-md-center">{{promise.xday}}</td>
                              <td class="text-md-center">{{promise.xhour}}</td>
                              <td class="text-md-center">{{promise.xmin}}</td>
                              <td class="text-md-center">{{promise.at_time}}</td>
                              <td align="center" class="text-md-center">
                                <v-btn @click="editFormPromise(promise)" depressed small color="primary"><v-icon>edit</v-icon></v-btn> 
                                <v-btn @click="deletePromise(promise)" depressed small color="error"><v-icon>delete</v-icon></v-btn>
                              </td>
                           </tr>
                           <tr v-if="promises.length === 0"><td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td> </tr>
                        </table>
                  </v-flex>
               </v-layout>



   <template>
  
    <v-dialog
      v-model="dialogdeletealertpromise"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey lighten-2 pt-2 pb-2"
                primary-title
            >
            Peringatan !
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout row>
                                    <v-flex pt-2 pr-2 xs12>
                                       {{msgalertpromise}} 
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialogdeletealertpromise = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="closeDeleteAlertPromise()"
                >
                Yakin lah
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  
</template>


  <template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogschedulepromise" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form Schedule Promise</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
          <v-form
              ref="formschedulepromise"
              v-model="validpromise"
              lazy-validation
            >
            <v-layout wrap>
                <v-flex xs12>
                  SCHEDULE : {{xschedules.name}}
                </v-flex>
                <v-flex xs12 sm12 d-flex>
                  <v-select
                    :items="days"
                    v-model="seletedday"
                    item-text="name"
                    item-value="id"
                    return-object
                    label="Hari dalam seminggu"
                  ></v-select>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Mulai Pengerjaan (hh:mm)"
                    v-model="starthm"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Akhir Pengerjaan (hh:mm)"
                    v-model="endhm"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Hari"
                    v-model="xday"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Jam"
                    v-model="xhour"
                    :disabled="readonlyhour"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Menit"
                    v-model="xminute"
                    :disabled="readonlyminute"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-checkbox v-on:change="changeAttime(flagattime)" v-model="flagattime" label="Pada Jam ?"></v-checkbox>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Pada Jam"
                    :disabled="readonlyattime"
                    v-model="attime"
                  ></v-text-field>
                </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="updateDialogFormSchedulePromise()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveFormSchedulePromise()">Simpan</v-btn>
          </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>

 </v-card>
 </v-flex>



</v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}


table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}

</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "Day Off Week",
               align: "Center",
               sortable: false,
               value: "mr",
               width: "15%",
               class: " blue lighten-4"
            },
            {
               text: "Start",
               align: "Center",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "blue lighten-4"
            },
            {
               text: "End",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
               class: "blue lighten-4"
            },

            {
               text: "Day",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            },

            {
               text: "Hour",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            },

            {
               text: "Minute",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            },

            {
               text: "At Time",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            },

            {
               text: "Action",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            }
         ],
          isLoading: false,
          color:"success",
          validpromise:false,
          days: [
            { id: "2", name: "Senin" },
            { id: "3", name: "Selasa" },
            { id: "4", name: "Rabu" },
            { id: "5", name: "Kamis" },
            { id: "6", name: "Jumat" },
            { id: "7", name: "Sabtu" }
          ],
          seletedday: { id: 1, name: "Minggu" },
          xid:0,
          starthm:"",
          endhm:"",
          xday:"",
          xhour:"",
          xminute:"",
          flagattime:false,
          attime:"",
          readonlyattime:true,
          readonlyhour:false,
          readonlyminute:false,
          dialogdeletealertpromise:false,
          msgalertpromise:""
      };
   },
   computed: {
      promises() {
          return this.$store.state.schedulepromise.schedulepromise
      },
      xschedules(){
        return this.$store.state.schedule.selected_schedule
      },
       dialogschedulepromise(){
        return this.$store.state.schedulepromise.dialog_form_schedule_promise
      },
      xispreschedule() {
                return this.$store.state.schedulepromise.ispreschedule
            }
  },
  methods : {
    updateDialogFormSchedulePromise(){
       this.$store.commit("schedulepromise/update_dialog_form_schedule_promise",false)
    },
    openFormSchedulePromise(val){
      //console.log("masuk")
      this.xid = val
      this.$refs.formschedulepromise.reset()
      this.$refs.formschedulepromise.resetValidation()
      this.$store.commit("schedulepromise/update_dialog_form_schedule_promise",true)
    },
    editFormPromise(data){
      this.xid = data.id
      let fildays =_.filter(this.days, function(o) { return  o.id === data.dayofweek})
      this.seletedday = fildays[0]
      this.starthm = data.start_hm
      this.endhm = data.end_hm
      this.xday = data.xday
      this.xhour = data.xhour
      this.minute = data.min
      this.flagattime = data.flagattime === 'N'?false:true
      this.attime = data.at_time
      this.readonlyattime = data.flagattime === 'Y' ? false:true
      this.readonlyhour = data.flagattime === 'Y' ? true:false
      this.readonlyminute = data.flagattime === 'Y' ? true:false
      this.$store.commit("schedulepromise/update_dialog_form_schedule_promise",true)
    },
    saveFormSchedulePromise(){
      if (this.$refs.formschedulepromise.validate()) {
          this.$store.dispatch("schedulepromise/save",{
            xid:this.xid,
            scheduleid:this.$store.state.schedule.selected_schedule.id,
            schedulename:this.$store.state.schedule.selected_schedule.name,
            dayofweek:this.seletedday.id,
            starthm:this.starthm,
            endhm:this.endhm,
            xday:this.xday,
            xhour:this.xhour,
            xminute:this.xminute,
            flagattime:this.flagattime === true ?"Y":"N",
            attime:this.attime
          })
      }
    },
    updateAlert_success(val){
      this.$store.commit("schedule/update_alert_success",val)
    },
    changeAttime(value){
        this.xhour = value === true ? 0:this.xhour
        this.xminute = value === true ? 0:this.xminute
        this.readonlyhour = value === true ? true:false
        this.readonlyminute = value === true ? true:false
        this.attime = value === true ? this.attime:""
        this.readonlyattime = value === true ? false:true
    },
    deletePromise(data){
      this.xid = data.id
      let fildays =_.filter(this.days, function(o) { return  o.id === data.dayofweek})
      this.seletedday = fildays[0]
      this.msgalertpromise = "Yakin, mau hapus promise schedule"+this.xschedules.name+"hari "+this.seletedday.name+" ?"
      this.dialogdeletealertpromise = true
    },
    closeDeleteAlertPromise(){
      this.$store.dispatch("schedulepromise/delete",{
            xid:this.xid,
            scheduleid:this.$store.state.schedule.selected_schedule.id,
             schedulename:this.$store.state.schedule.selected_schedule.name
          })
      this.dialogdeletealertpromise = false
    }
  }
}
</script>
