<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>Hari : {{xday.name}}</v-toolbar-title>
    <v-spacer></v-spacer>
  <!--  <v-btn @click="openFormPromise(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="7%" class="text-md-center pt-2 pb-2">KODE</th>
                <th  width="25%" class="text-md-center pt-2 pb-2">PROMISE</th>
                <th  width="30%" class="text-md-center pt-2 pb-2">AGREEMENT</th>
                <th  width="35%" class="text-md-center pt-2 pb-2">JAM</th>
              </tr>
              <tr v-if="promises.length > 0 " v-for="(promise,idx) in promises">
                <td width="7%" class="text-md-left  pl-2">{{promise.code}}</td>
                <td width="25%" class="text-md-left  pl-2">{{promise.name}}</td>
                <td width="30%" class="text-md-left  pl-2">{{promise.Agreement}}</td>
                <td width="35%" class="text-md-left  pl-2">{{promise.Jam}}</td>

            <!--    <td align="center" class="text-md-center">
                  <v-btn @click="editFormPromise(promise)"  fab dark small color="primary"><v-icon>edit</v-icon></v-btn>
                  <v-btn @click="deletePromise(promise)"  fab dark 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="dialogpromise" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form promise</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
          <v-form
              ref="formdaypromise"
              v-model="validpromise"
              lazy-validation
            >
            <v-layout wrap>
                <v-flex xs12>
                  HARI : {{xday.name}}
                </v-flex>
                <v-flex xs12>
                  <v-text-field label="Kode" v-model="code"   ></v-text-field>
                </v-flex>
				<v-flex xs12>
                  <v-text-field label="Nama" v-model="name"   ></v-text-field>
                </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="updateDialogFormPromise()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveFormPromise()">Simpan</v-btn>
          </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>

  <template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogpromiseedit" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form promise</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
          <v-form
              ref="formdaypromise"
              v-model="validpromise"
              lazy-validation
            >
            <v-layout wrap>

                <v-flex xs12>
                <v-select item-text= "name" return-object :items="xdaynames"
                          item-value= "id"
                   v-model="xdayname" label="Day" ></v-select>
                </v-flex>
                <v-flex xs12>
                  <v-text-field readonly label="Kode" v-model="code"   ></v-text-field>
                </v-flex>

		<v-flex xs12>
                  <v-text-field readonly label="Nama" v-model="name"   ></v-text-field>
                </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="closeDialogEditPromise()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveEditPromise()">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: "KODE",
               align: "Left",
               sortable: false,
               value: "code",
               width: "15%",
               class: " blue lighten-4"
            },
            {
               text: "NAMA",
               align: "Left",
               sortable: false,
               value: "name",
               width: "15%",
               class: "blue lighten-4"
            } ,

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

            {
               text: "JAM ",
               align: "Center",
               sortable: false,
               value: "status",
               width: "25%",
               class: "blue lighten-4"
            }
         ],
          isLoading: false,
          color:"success",
          validpromise:false,
          xid:0,
          code:"",
          name:"",

          dialogdeletealertpromise:false,
          msgalertpromise:""
      };
   },
   computed: {
      dialogpromiseedit() {
          return this.$store.state.promise.dialog_form_promise_edit
      },
      promises() {
          return this.$store.state.promise.promises
      },
      xday(){
        return this.$store.state.day.selected_day
      },
       dialogpromise(){
        return this.$store.state.promise.dialog_form_promise
      },
      xerrors() {
          return this.$store.state.promise.errors
      },
      xdaynames() {
          return  this.$store.state.day.days
      },
      xdayname: {
          get() {
              return this.$store.state.day.selected_day
          },
          set(val) {
              var xval = val
              console.log('set',xval)
              if ( val == undefined ) {
                 for(var i=0; i< this.xdaynames.length ; i++ ) {
                    var xs = this.xdaynames[i]
                    console.log('xs',xs);
                    //if (xs.id == val ) {
                    //   xval = xs
                    //}
                 }
              }
             this.$store.commit("promise/update_selected_dayname",xval)
          }
      }


  },
  methods : {
    updateDialogFormPromise(){
       this.$store.commit("promise/update_dialog_form_promise",false)
    },
    openFormPromise(val){
      this.xid = val
      this.code = ''
      this.name = ''
      this.$store.commit("promise/update_dialog_form_promise",true)
    },
    editFormPromise(val){
      this.$store.commit("promise/update_error_code",false)

      this.$store.commit("promise/update_error_name",false)
      this.$store.commit("promise/update_error_xdayname",false)
      console.log('edit ',val)
      this.xid = val.id
      this.code = val.code
      this.name = val.name
      this.xdayname = val.dayid
      this.$store.commit("promise/update_dialog_form_promise_edit",true)
    },
    closeDialogEditPromise() {
      this.$store.commit("promise/update_dialog_form_promise_edit",false)
    },
    saveEditPromise() {
      this.$store.dispatch("promise/save_edit",{
             xid:this.xid,
            dayid:this.$store.state.day.selected_day.id,
            dayname:this.$store.state.day.selected_day.name,
            code:this.code,
			name:this.name,
            xdayname:this.xdayname
          })
    },
    saveFormPromise(){
      this.$store.dispatch("promise/save",{
            xid:this.xid,
            dayid:this.$store.state.day.selected_day.id,
            dayname:this.$store.state.day.selected_day.name,
            code:this.code,
			name:this.name
          })
    },
    updateAlert_success(val){
      this.$store.commit("day/update_alert_success",val)
    },
    deletePromise(data){
      this.xid = data.id
      this.msgalertpromise = "Yakin, mau hapus ?"
      this.dialogdeletealertpromise = true
    },
    closeDeleteAlertPromise(){
      this.$store.dispatch("promise/delete",{
            xid:this.xid,
            dayid:this.$store.state.day.selected_day.id,
            dayname:this.$store.state.day.selected_day.name,
            name:this.name
          })
      this.dialogdeletealertpromise = false
    }
  }
}
</script>
