<template>
  <v-layout>
    <template>

      <v-dialog v-model="dialogdeletealert" max-width="30%">
        <v-card>
          <v-card-title class="headline blue 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>
                        {{msgalert}}
                      </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="dialogdeletealert = false">
              Tutup
            </v-btn>
            <v-btn color="primary" flat @click="closeDeleteAlert()">
              Yakin lah
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    </template>


    <v-flex xs12>
      <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
        <v-toolbar color="blue lighten-2" dark height="50px">
          <v-toolbar-title class="white--text">SCHEDULE</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormSchedule()" icon>
            <v-icon class="white--text">library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
          {{msgsnackbar}}
          <v-btn flat @click="updateAlert_success(false)">
            Tutup
          </v-btn>
        </v-snackbar>
        <v-layout row style="background:#bbdefb;padding-top:5px;" justify-center>
          <v-list-tile>
            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
            </v-list-tile-content>
          </v-list-tile>
        </v-layout>
        <v-divider></v-divider>
        <div style="overflow: auto;max-height:550px">
          <div v-for="(vs,idx) in vschedules" :key="vs.id">

            <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-on="on">{{vs.detail}}</span>
                      </template>
                      <span>{{vs.detail}}</span>
                    </v-tooltip>
                  </v-flex>
                  <v-flex :class="{ boxoutline : !isSelected(vs) , boxsolid: isSelected(vs) }" class="text-center" style="padding-top:10px"
                    pl-2 pb-2 pr-2 xs2>
                    <v-layout row align-center justify-space-between>
                      <v-icon style="color:#ffffff" @click="editSchedule(vs)">edit</v-icon>
                      <v-icon style="color:#ffffff" @click="deleteSchedule(vs)">clear</v-icon>
                    </v-layout>
                  </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-on="on">{{vs.detail}}</span>
                      </template>
                      <span>{{vs.detail}}</span>
                    </v-tooltip>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex :class="{ boxoutline : !isSelected(vs) , boxsolid: isSelected(vs) }" class="text-center" style="padding-top:10px"
                pl-2 pb-2 pr-2 xs2>
                <v-layout row align-center justify-space-between>
                  <v-icon :style="{color:iconColor(vs)}" @click="editSchedule(vs)">edit</v-icon>
                  <v-icon :style="{color:iconColor(vs)}" @click="deleteSchedule(vs)">clear</v-icon>
                </v-layout>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
          </div>
        </div>
        <v-layout row>
          <v-flex class="text-xs-center" pt-3 xs12>
            <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span class="red--text">{{xtotalfilterschedules}}</span> dari <span class="red--text">{{xtotalschedules}}</span>              total data</p>
            <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
            <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
          </v-flex>
        </v-layout>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogschedule" persistent max-width="1000px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Schedule</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formschedule" v-model="valid" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-text-field v-model="schedulename" label="Nama Schedule" :rules="nameRules" required></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs7 pa-1>
                            <v-autocomplete label="Pemeriksaan" v-model="xorderautotest" :items="xorderautotests" :search-input.sync="search_test" auto-select-first
                              no-filter item-text="Nat_TestName" return-object no-data-text="Cari Pemeriksaan" outline small>
                              <template slot="item" slot-scope="{ item }">
                                <v-list-tile-content>
                                  <v-list-tile-title v-text="item.Nat_TestName"></v-list-tile-title>
                                </v-list-tile-content>
                              </template>
                            </v-autocomplete>
                          </v-flex>
                          <v-flex xs5 pa-1>
                            <v-btn @click="addTest()" color="blue en-3">Tambah Test</v-btn>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                      <v-flex>
                        <p class="error pl-2 pr-2" style="color:#fff" v-if="xerrorname === true">Udah ada dong nama schedule yang sama</p>
                      </v-flex>
                      <v-flex xs4 v-for="(vst,idx) in xordertests" :key="vst.Nat_TestID" class="pr-2 pb-1">
                        <v-layout row>
                          <v-flex class="boxoutline" style="text-overflow:ellipsis;overflow:hidden;" xs11>
                            <v-btn class="ml-4" large @click="deleteDataPx(idx)" color="error">
                              <v-icon left>close</v-icon>{{vst.Nat_TestName}}</v-btn>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormSchedule()">Tutup</v-btn>
                  <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormSchedule()">Simpan</v-btn>
                  <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormSchedule()">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;
  }

  .boxoutlinex {
    color: teal;
    border: 1px solid teal;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
  }

  .boxoutlinex:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    font-size: 15px;
    font-weight: 700;
  }

  .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,
      schedulename: '',
      search_test: '',
      isLoading: false,
      flagpreschedule: "",
      preschedulemaxhour: '',
      nameRules: [
        v => !!v || 'Nama Schedule harus diisi'
      ],
      dialogdeletealert: false,
      msgalert: "",
      xid: 0,
      xsearch: ""
    }),
    mounted() {
      this.$store.dispatch("schedule/lookup", {
        search: this.xsearch,
        all: this.xshowall
      })
    },
    computed: {
      xact() {
        return this.$store.state.schedule.act
      },
      xerrorname() {
        return this.$store.state.schedule.error_name
      },
      xshowall() {
        return this.$store.state.schedule.show_all
      },
      vschedules() {
        return this.$store.state.schedule.schedules
      },
      vtests() {
        return this.$store.state.test.selected
      },
      xtotalschedules() {
        return this.$store.state.schedule.total_schedules
      },
      xtotalfilterschedules() {
        return this.$store.state.schedule.total_filter_schedules
      },
      dialogschedule() {
        return this.$store.state.schedule.dialog_form_schedule
      },
      snackbar: {
        get() {
          return this.$store.state.schedule.alert_success
        },
        set(val) {
          this.$store.commit("schedule/update_alert_success", val)
        }
      },
      msgsnackbar() {
        return this.$store.state.schedule.msg_success
      },
      lookupstatus() {
        return this.$store.state.schedule.lookup_schedule
      },
      xtests() {
        return this.$store.state.schedule.tests
      },
      test: {
        get() {
          return this.$store.state.schedule.test
        },
        set(val) {
          this.$store.commit("schedule/update_test", val)
        }
      },
      xorderautotests() {
        return this.$store.state.schedule.orderautotests
      },
      xorderautotest: {
        get() {
          return this.$store.state.schedule.orderautotest
        },
        set(val) {
          this.$store.commit("schedule/update_orderautotest", val)
        }
      },
      xordertests() {
        return this.$store.state.schedule.ordertests
      }
    },
    methods: {
      iconColor(vs) {
        if (this.isSelected(vs)) return '#fff';
        return 'red';
      },
      updateShowAll(val) {
        this.$store.commit("schedule/update_show_all", val)
        this.$store.dispatch("schedule/lookup", {
          search: this.xsearch,
          all: this.xshowall
        })
      },
      isSelected(p) {
        return p.id == this.$store.state.schedule.selected_schedule.id
      },
      thr_search_test: _.debounce(function () {
        this.$store.dispatch("schedule/searchtest", this.search_test)
      }, 2000),
      subname(name) {
        var xname = name
        if (xname.length > 15) {
          xname = xname.substring(0, 12) + '...'
        }
        return xname
      },
      selectMe(sc) {
        this.$store.commit("schedule/update_selected_schedule", sc)

        this.$store.dispatch("schedulepromise/lookup", {
          id: this.$store.state.schedule.selected_schedule.id
        })

        this.$store.commit("schedulepromise/update_selected_promise", 0)
        this.$store.dispatch("test/selected", {
          id: this.$store.state.schedule.selected_schedule.id
        })

        this.$store.dispatch("scheduleday/lookup", {
          id: this.$store.state.schedule.selected_schedule.id
        })
      },
      updateDialogFormSchedule() {
        this.$store.commit("schedule/update_dialog_form_schedule", false)
      },
      addTest() {
        var oldArr = this.$store.state.schedule.ordertests
        oldArr.push(this.$store.state.schedule.orderautotest)
        this.searchtest = ''
        this.$store.commit("schedule/update_orderautotests", [])
        this.$store.commit("schedule/update_orderautotest", {})
      },
      deleteDataPx(idx) {
        var inx = parseInt(idx);
        var xrow = this.$store.state.schedule.ordertests[inx]
        if (parseInt(xrow.xid) !== 0) {
          var xdeltest = this.$store.state.schedule.deleted_ordertests
          xdeltest.push(xrow)
          this.$store.commit("schedule/update_deleted_ordertests", xdeltest)
        }
        var oldArr = this.$store.state.schedule.ordertests
        oldArr.splice(inx, 1)
        this.$store.commit("schedule/update_ordertests", oldArr)
      },
      openFormSchedule() {
        this.$refs.formschedule.reset()
        this.$refs.formschedule.resetValidation()
        this.$store.commit("schedule/update_act", 'new')
        this.$store.commit("schedule/update_error_name", false)
        this.$store.commit("schedule/update_dialog_form_schedule", true)
      },
      saveFormSchedule() {
        if (this.$refs.formschedule.validate()) {
          this.$store.dispatch("schedule/save", {
            name: this.schedulename,
            ordertests: this.xordertests
          })

        }

      },
      updateFormSchedule() {
        if (this.$refs.formschedule.validate()) {
          this.$store.dispatch("schedule/update", {
            id: this.xid,
            name: this.schedulename,
            ordertests: this.xordertests,
            deleted_ordertests: this.$store.state.schedule.deleted_ordertests
          })

        }

      },
      updateAlert_success(val) {
        this.$store.commit("schedule/update_alert_success", val)
      },
      editSchedule(data) {
        //console.log(data)
        this.xid = data.id
        this.schedulename = data.name
        this.$store.commit("schedule/update_ordertests", data.tests)
        this.$store.commit("schedule/update_act", 'edit')
        this.$store.commit("schedule/update_error_name", false)
        this.$store.commit("schedule/update_dialog_form_schedule", true)
      },
      deleteSchedule(data) {
        //console.log(data)
        this.xid = data.id
        var xdata = {
          id: data.id,
          name: data.name,
          schedulepromise: 'xxx',
          scheduletests: 'xxx'
        }
        this.$store.commit("schedule/update_selected_schedule", xdata)
        this.msgalert = "Yakin, mau hapus schedule " + data.name + "  ?"
        this.dialogdeletealert = true
      },
      closeDeleteAlert() {
        this.$store.dispatch("schedule/delete", {
          scheduleid: this.$store.state.schedule.selected_schedule.id,
          schedulename: this.$store.state.schedule.selected_schedule.name
        })
        this.dialogdeletealert = false
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("schedule/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()
        }
      },
      search_test(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.schedule.update_autocomplete_status == 1) return
        this.thr_search_test()
      }
    }
  }
</script>