<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>Agreement Perusahaan : {{xcompany.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormMou(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="10%" class="text-md-center pt-2 pb-2">NO.</th>
                <th width="15%" class="text-md-center pt-2 pb-2">NAMA</th>
                <th width="10%" class="text-md-center pt-2 pb-2">TGL MULAI</th>
                <th width="10%" class="text-md-center pt-2 pb-2">TGL AKHIR</th>
                <th width="10%" class="text-md-center pt-2 pb-2">DASAR</th>
                <th width="10%" class="text-md-center pt-2 pb-2">KLASIFIKASI OMZET</th>
                <th width="10%" class="text-md-center pt-2 pb-2">TIPE</th>
                <th width="15%" class="text-md-center pt-2 pb-2">VERIFIKASI</th>
                <th width="15%" class="text-md-center pt-2 pb-2">RILIS</th>

                <th class="text-md-center pt-2 pb-2">AKSI</th>
              </tr>
              <tr v-if="mous.length > 0 " v-for="(mou,idx) in mous">
              <td class="text-md-left pl-3">{{mou.number}}</td>
                <td class="text-md-left pl-3">{{mou.name}}</td>
                <td class="text-md-center">{{mou.startdate}}</td>
                <td class="text-md-center">{{mou.enddate}}</td>
                <td class="text-md-center">{{mou.basename}}</td>               
                <td class="text-md-center">{{mou.M_OmzetTypeName}}</td>
                <td class="text-md-center">{{mou.M_MouTypeName}}</td>
                <td class="text-md-center">{{mou.verify}}</td>
                <td class="text-md-center">{{mou.released}}</td>
                <td align="center" class="text-md-center">
                  <v-btn @click="editFormMou(mou)" depressed small color="primary">
                    <v-icon>edit</v-icon>
                  </v-btn>
                  <v-btn @click="deleteMou(mou)" depressed small color="error">
                    <v-icon>delete</v-icon>
                  </v-btn>
                  <v-btn v-if="mou.isverified == 'N'"  @click="verifyMou(mou)" depressed small color="success">
                    <v-icon>check</v-icon>
                  </v-btn>
                  <v-btn v-if="mou.isverified == 'Y' && mou.isreleased == 'N'"  @click="releaseMou(mou)" depressed small color="primary">
                    <v-icon>check</v-icon>
                  </v-btn>
                </td>
              </tr>
              <tr v-if="mous.length === 0">
                <td align="center" style="height:50px;text-align:center" colspan="11">Belum ada data</td>
              </tr>
            </table>
          </v-flex>
        </v-layout>
        <template>

          <v-dialog v-model="dialogdeletealertmou" 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>
                            {{msgalertmou}}
                          </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="dialogdeletealertmou = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeDeleteAlertMou()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>

<template>

          <v-dialog v-model="dialogverifyalertmou" max-width="30%">
            <v-card>
              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                Konfirmasi
              </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>
                            {{msgalertmou}}
                          </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="dialogverifyalertmou = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeVerifyAlertMou()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


<template>

          <v-dialog v-model="dialogreleasealertmou" max-width="30%">
            <v-card>
              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                Konfirmasi
              </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>
                            {{msgalertmou}}
                          </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="dialogreleasealertmou = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeReleaseAlertMou()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>

        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogmou" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Agreement</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formcompanymou" v-model="validmou" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        PERUSAHAAN : {{xcompany.name}} <span> &nbsp;[ <span style="color:#2196F3;font-weight: 900;">{{number}} </span>                        &nbsp;]
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="Nama" v-model="name"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="No Ref" v-model="refnumber"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-menu ref="menustartdate" v-model="menustartdate" :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                              offset-y full-width max-width="290px" min-width="290px">
                              <template v-slot:activator="{ on }">
                                <v-text-field v-model="startComputedDateFormatted" label="Tgl. Mulai" readonly v-on="on" @blur="date = deFormatedDate(startComputedDateFormatted)"></v-text-field>
                              </template>
                              <v-date-picker v-model="xstartdate" no-title @input="menustartdate = false"></v-date-picker>

                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-menu ref="menuenddate" v-model="menuenddate" :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                              offset-y full-width max-width="290px" min-width="290px">
                              <template v-slot:activator="{ on }">
                                <v-text-field v-model="endComputedDateFormatted" label="Tgl. Selesai" readonly v-on="on" @blur="date = deFormatedDate(endComputedDateFormatted)"></v-text-field>
                              </template>
                              <v-date-picker v-model="xenddate" no-title @input="menuenddate = false"></v-date-picker>

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

                        <v-flex xs12>

                          <v-select item-text="basename" return-object :items="xbases" v-model="xbase" label="Dasar Agreement"></v-select>
                        </v-flex>
                        <v-flex xs12>
                          <v-select item-text="M_OmzetTypeName" return-object :items="xomzettypes" v-model="xomzettype" label="Klasifikasi Omset"></v-select>
                        </v-flex>
                        <v-flex xs12>
                          <v-select item-text="M_MouTypeName" return-object :items="xmoutypes" v-model="xmoutype" label="Tipe Agreement"></v-select>
                        </v-flex>
                        <v-flex xs12>
                          <v-layout>
                            <v-flex xs6 pa-1>
                              <v-checkbox v-model="isbill" label="Bill ?"></v-checkbox>
                            </v-flex>
                            <v-flex xs6 pa-1>
                              <v-text-field label="Min DP (Persen)" v-model="mindp"></v-text-field>
                            </v-flex>
                          </v-layout>
                        </v-flex>

                        <v-flex xs12>
                          <v-layout>
                            <v-flex xs6 pa-1>
                              <v-checkbox v-model="isaging" label="Aging on Hold ?"></v-checkbox>
                            </v-flex>
                            <v-flex xs6 pa-1>
                              <v-text-field label="Keterangan Aging on Hold" v-model="agingnote"></v-text-field>
                            </v-flex>
                          </v-layout>
                        </v-flex>
                        <v-flex xs12>
                          <v-checkbox v-model="isdefault" label="Default ?"></v-checkbox>
                        </v-flex>
                        <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="updateDialogFormMou()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="saveFormMou()">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 = {
    components: {
      'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue')
    },
    data() {
      return {
        query: "",
        items: [],
        headers: [{
            text: "NAME",
            align: "Center",
            sortable: false,
            value: "lab",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "STARTDATE",
            align: "Center",
            sortable: false,
            value: "name",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "ENDDATE",
            align: "Center",
            sortable: false,
            value: "name",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "ISBILL",
            align: "Center",
            sortable: false,
            value: "name",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "Action",
            align: "Center",
            sortable: false,
            value: "status",
            width: "15%",
            class: "blue lighten-4"
          }
        ],
        isLoading: false,
        color: "success",
        validmou: false,
        xid: 0,
        name: "",
        number: "",
        refnumber: "",
        mindp: "",
        agingnote: "",
        startdate: "",
        enddate: "",
        isbill: "",
        isdefault: "",
        isaging: "",
        menustartdate: false,
        menuenddate: false,
        date: new Date().toISOString().substr(0, 10),

        dialogdeletealertmou: false,
        dialogverifyalertmou: false,
        dialogreleasealertmou: false,
        msgalertmou: ""
      };
    },
    mounted() {
      this.$store.dispatch("mou/selectbase")
      this.$store.dispatch("mou/selectomzettype")
      this.$store.dispatch("mou/selectmoutype")
    },
    computed: {
      mous() {
        return this.$store.state.mou.mous
      },
      xcompany() {
        return this.$store.state.company.selected_company
      },
      dialogmou() {
        return this.$store.state.mou.dialog_form_mou
      },
      xerrors() {
        return this.$store.state.mou.errors
      },
      startComputedDateFormatted() {
        return this.formatDate(this.xstartdate)
      },
      xstartdate: {
        get() {
          return this.$store.state.mou.startdate
        },
        set(val) {
          this.$store.commit("mou/update_startdate", val)
        }
      },
      endComputedDateFormatted() {
        return this.formatDate(this.xenddate)
      },
      xenddate: {
        get() {
          return this.$store.state.mou.enddate
        },
        set(val) {
          this.$store.commit("mou/update_enddate", val)
        }
      },
      xbases() {
        return this.$store.state.mou.bases
      },
      xbase: {
        get() {
          return this.$store.state.mou.base
        },
        set(val) {
          this.$store.commit("mou/update_base", val)
        }

      },
      xomzettypes() {
        return this.$store.state.mou.omzettypes
      },
      xomzettype: {
        get() {
          return this.$store.state.mou.omzettype
        },
        set(val) {
          this.$store.commit("mou/update_omzettype", val)
        }

      },
      xmoutypes() {
        return this.$store.state.mou.moutypes
      },
      xmoutype: {
        get() {
          return this.$store.state.mou.moutype
        },
        set(val) {
          this.$store.commit("mou/update_moutype", val)
        }

      }
    },
    methods: {
      updateDialogFormMou() {
        this.$store.commit("mou/update_dialog_form_mou", false)
      },
      openFormMou(val) {
        this.xid = val
        this.name = ''
        this.number = ''
        this.refnumber = ''
        this.startdate = ''
        this.enddate = ''
        this.isbill = ''
        this.isdefault = ''
        this.isaging = ''
        this.mindp = ''
        this.agingnote = ''
        this.$store.commit("mou/update_dialog_form_mou", true)
      },
      editFormMou(val) {
        //  this.$store.commit("mou/update_error_name", false)
        this.xid = val.id
        this.name = val.name
        this.number = val.number
        this.refnumber = val.refnumber
        this.startdate = val.xstartdate
        this.enddate = val.xenddate
        this.isbill = val.isbill === 'N' ? false : true
        this.isdefault = val.isdefault === 'N' ? false : true
        this.isaging = val.isaging === 'N' ? false : true
        this.mindp = val.mindp
        this.agingnote = val.agingnote
        var bases = this.$store.state.mou.bases
        var idx_base = _.findIndex(bases, function (o) {
          return o.baseid == val.baseid
        })
        var base = bases[idx_base]
        this.$store.commit("mou/update_base", base)

        var omzettypes = this.$store.state.mou.omzettypes
        var idx_omzettype = _.findIndex(omzettypes, function (o) {
          return o.M_OmzetTypeID == val.M_OmzetTypeID
        })
        var omzettype = omzettypes[idx_omzettype]
        this.$store.commit("mou/update_omzettype", omzettype)

        var moutypes = this.$store.state.mou.moutypes
        var idx_moutype = _.findIndex(moutypes, function (o) {
          return o.M_MouTypeID == val.M_MouTypeID
        })
        var moutype = moutypes[idx_moutype]
        this.$store.commit("mou/update_moutype", moutype)
        this.$store.commit("mou/update_dialog_form_mou", true)
        this.$store.commit("mou/update_startdate", val.M_MouStartDate)
        this.$store.commit("mou/update_enddate", val.M_MouEndDate)
      },
      saveFormMou() {
        this.$store.dispatch("mou/save", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name,
          startdate: this.xstartdate,
          enddate: this.xenddate,
          isbill: this.isbill === true ? "Y" : "N",
          isdefault: this.isdefault === true ? "Y" : "N",
          isaging: this.isaging === true ? "Y" : "N",
          number: this.number,
          refnumber: this.refnumber,
          mindp: this.mindp,
          agingnote: this.agingnote,
          base: this.xbase.baseid,
          omzettype: this.xomzettype.M_OmzetTypeID,
          moutype: this.xmoutype.M_MouTypeID
        })
      },
      set_date2(x) {
        this.startdate = x.new_date
      },
      set_date3(x) {
        this.enddate = x.new_date
      },
      formatDate(date) {
        if (!date) return null

        const [year, month, day] = date.split('-')
        return `${day}-${month}-${year}`
      },
      deFormatedDate(date) {
        if (!date) return null

        const [day, month, year] = date.split('-')
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
      updateAlert_success(val) {
        this.$store.commit("company/update_alert_success", val)
      },
      deleteMou(data) {
        this.xid = data.id

        this.msgalertmou = "Yakin, mau hapus agreement ini?"
        this.dialogdeletealertmou = true
      },
      closeDeleteAlertMou() {
        this.$store.dispatch("mou/delete", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name
        })
        this.dialogdeletealertmou = false
      },
      verifyMou(data) {
        this.xid = data.id

        this.msgalertmou = "Apakah Anda yakin akan mem-verifikasi agreement ini?"
        this.dialogverifyalertmou = true
      },
      closeVerifyAlertMou() {
        this.$store.dispatch("mou/verify", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name
        })
        this.dialogverifyalertmou = false
      },
      releaseMou(data) {
        this.xid = data.id

        this.msgalertmou = "Apakah Anda yakin akan merilis agreement ini?"
        this.dialogreleasealertmou = true
      },
      closeReleaseAlertMou() {
        this.$store.dispatch("mou/release", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name
        })
        this.dialogreleasealertmou = false
      }
    }
  }
</script>