<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title>TEMPLATE DETAIL : {{xsotemplates.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormSotemplateDetail(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="25%" class="text-md-center pt-2 pb-2">BAHASA</th>
                <th width="25%" class="text-md-center pt-2 pb-2">NAMA</th>
                <th width="20%" class="text-md-center pt-2 pb-2">SATUAN</th>
                <th class="text-md-center pt-2 pb-2">AKSI</th>
              </tr>
              <tr v-if="details.length > 0 " v-for="(detail,idx) in details">
                <td class="text-md-left pl-3">{{detail.M_LangName}}</td>
                <td class="text-md-left pl-3">{{detail.name}}</td>
                <td class="text-md-left pl-3">{{detail.unit}}</td>
                <td align="center" class="text-md-center">
                  <v-btn @click="editFormDetail(detail)" depressed small color="primary">
                    <v-icon>edit</v-icon>
                  </v-btn>
                  <v-btn @click="deleteDetail(detail)" depressed small color="error">
                    <v-icon>delete</v-icon>
                  </v-btn>
                </td>
              </tr>
              <tr v-if="details.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="dialogdeletealertdetail" 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>
                            {{msgalertdetail}}
                          </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="dialogdeletealertdetail = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeDeleteAlertDetail()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogsotemplatedetail" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Sotemplate Detail</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formsotemplatedetail" v-model="validdetail" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        TEMPLATE : {{xsotemplates.name}}
                      </v-flex>
                      <v-flex xs12 sm12 d-flex>
                        <v-select item-text="M_LangName" return-object :items="xlangs" v-model="xlang" label="Bahasa"></v-select>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="Nama" v-model="xname"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field hint="isi jika hanya diperlukan" label="Satuan" v-model="xunit"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="Urutan" v-model="xorder"></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="updateDialogFormSotemplateDetail()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="saveFormSotemplateDetail()">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",
        validdetail: 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,
        xname: "",
        xunit:"",
        xorder:0,
        starthm: "",
        endhm: "",
        xday: "",
        xhour: "",
        xminute: "",
        flagattime: false,
        attime: "",
        readonlyattime: true,
        readonlyhour: false,
        readonlyminute: false,
        dialogdeletealertdetail: false,
        msgalertdetail: ""
      };
    },
     mounted() {
      this.$store.dispatch("sotemplatedetail/selectlang")
    },
    computed: {
      details() {
        return this.$store.state.sotemplatedetail.sotemplatedetail
      },
      xsotemplates() {
        return this.$store.state.sotemplate.selected_sotemplate
      },
      dialogsotemplatedetail() {
        return this.$store.state.sotemplatedetail.dialog_form_sotemplate_detail
      },
      xispresotemplate() {
        return this.$store.state.sotemplatedetail.ispresotemplate
      },
      xlangs() {
        return this.$store.state.sotemplatedetail.langs
      },
      xlang: {
        get() {
          return this.$store.state.sotemplatedetail.lang
        },
        set(val) {
          this.$store.commit("sotemplatedetail/update_lang", val)
        }

      }
    },
    methods: {
      updateDialogFormSotemplateDetail() {
        this.$store.commit("sotemplatedetail/update_dialog_form_sotemplate_detail", false)
      },
      openFormSotemplateDetail(val) {
        //console.log("masuk")
        this.xid = val
        this.$refs.formsotemplatedetail.reset()
        this.$refs.formsotemplatedetail.resetValidation()
        this.$store.commit("sotemplatedetail/update_dialog_form_sotemplate_detail", true)
      },
      editFormDetail(data) {
        this.xid = data.id
        this.xname = data.name
        this.xunit = data.unit
        this.xorder = data.xorder

        var langs = this.$store.state.sotemplatedetail.langs
        var idx_lang = _.findIndex(langs, function (o) {
          return o.M_LangID == data.M_LangID
        })
        var lang = langs[idx_lang]
        this.$store.commit("sotemplatedetail/update_lang", lang)
        this.$store.commit("sotemplatedetail/update_dialog_form_sotemplate_detail", true)
      },
      saveFormSotemplateDetail() {
        if (this.$refs.formsotemplatedetail.validate()) {
          this.$store.dispatch("sotemplatedetail/save", {
            xid: this.xid,
            sotemplateid: this.$store.state.sotemplate.selected_sotemplate.id,
            sotemplatename: this.$store.state.sotemplate.selected_sotemplate.name,
            name: this.xname,
            unit:this.xunit,
            order:this.xorder,
            langid: this.xlang.M_LangID
          })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("sotemplate/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
      },
      deleteDetail(data) {
        this.xid = data.id
       
        this.msgalertdetail = "Yakin, mau hapus detail  " +data.name+" ?"
        this.dialogdeletealertdetail = true
      },
      closeDeleteAlertDetail() {
        this.$store.dispatch("sotemplatedetail/delete", {
          xid: this.xid,
          sotemplateid: this.$store.state.sotemplate.selected_sotemplate.id,
          sotemplatename: this.$store.state.sotemplate.selected_sotemplate.name
        })
        this.dialogdeletealertdetail = false
      }
    }
  }
</script>