<template>
      <div>
            <v-dialog v-model="dialog_card" width="65%">
                  <v-card>
                        <v-card-title class="teal subheading  white--text pt-2 pb-2" primary-title align-center>
                              <span class="font-weight-thin">KARTU ANGGOTA</span>
                        </v-card-title>
                        <v-card-text class="pt-2 pb-1">
                              <v-layout>
                                    <v-flex xs12>
                                          <object :data="rpt_card" width="100%" height="512px"></object>
                                    </v-flex>
                              </v-layout>
                        </v-card-text>
                  </v-card>
            </v-dialog>
            <v-layout>
                  <v-flex xs12>
                        <v-card tile flat color=" pa-2 teal lighten-4">
                              <h5 class=" subtitle-1 font-weight-bold">DAFTAR PASIEN</h5>
                        </v-card>
                  </v-flex>
            </v-layout>
            <v-layout>
                  <v-flex xs12>
                        <table>
                              <tr style="background:#64b2cd">
                                    <th style="width:5%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2"></th>
                                    <th style="width:15%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2">NAMA</th>
                                    <th style="width:30%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2">ALAMAT</th>
                                    <th style="width:30%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2">ALAMAT HS</th>
                                    <th style="width:15%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2">NO. HP</th>
                                    <th style="width:5%;font-weight:bold;font-size:12px;color:#fff" class="text-md-center pt-2 pb-2">AKSI</th>
                              </tr>
                              <tr v-if="s_patient.length === 0">
                                    <td class="pa-2 text-xs-center caption" colspan="6">Belum ada data pasien</td>
                              </tr>
                              <tr v-if="s_patient.length > 0" style="font-size:12px" v-for="p in s_patient" v-bind:key="p.M_PatientID">
                                    <td class="text-md-center pl-3">
                                          <v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details v-model="p.M_PatientIsDefault" @change="checkTop(p)"></v-checkbox>
                                    </td>
                                    <td class="text-md-left pl-3">
                                          <p class="mb-1">{{ p.M_PatientName}}</p>
                                    </td>
                                    <td class="text-md-left pl-3">{{ p.M_PatientAddress }}</td>
                                    <td class="text-md-left pl-3">{{ p.alamaths }}</td>
                                    <td class="text-md-right mono pr-2">{{ p.M_PatientHP }}</td>
                                    <td class="text-md-center">
                                          <v-icon color="#ee7777" @click="deletePasien(p)">delete</v-icon>
                                    </td>
                              </tr>
                        </table>
                  </v-flex>
            </v-layout>
            <v-layout>
                  <v-flex xs12>
                        <v-card tile flat color=" pa-2 teal lighten-4">
                              <h5 class=" subtitle-1 font-weight-bold">ALAMAT HOME SERVICE</h5>
                        </v-card>
                  </v-flex>
            </v-layout>
            <v-layout>
                  <v-flex xs12>
                        <v-btn v-if="this.hspatientid > 0" color="blue" dark class="one-btn-icon ma-1" @click="add_hsaddress">
                              TAMBAH ALAMAT HOME SERVICE
                        </v-btn>
                  </v-flex>
            </v-layout>
            <v-layout mt-1 row wrap>
                  <v-flex class="row" ma-1 xs11 v-for="(a,idx) in s_address">
                        <v-layout align-center row>
                              <v-flex xs1>
                                    <v-btn v-if="a.chex  === 'N'" @click="changeBoxRight(a,idx)" dark style="min-width:20px" small color="grey darken-1">
                                          <v-icon small>close</v-icon>
                                    </v-btn>
                                    <v-btn v-if="a.chex  === 'Y'" @click="changeBoxRight(a,idx)" depressed style="min-width:20px" small color="teal lighten-4">
                                          <v-icon color="teal" small>check</v-icon>
                                    </v-btn>
                              </v-flex>
                              <v-flex mb-1 pl-2 xs11>
                                    <p class="mb-0 font-weight-black" style="font-size:12px">
                                          {{a.HS_AddressLabel}} | {{a.hsprice}}
                                    </p>
                                    <p class="mb-0 font-weight-black" style="font-size:11px">
                                          {{a.HS_AddressAddress}}
                                    </p>
                              </v-flex>
                        </v-layout>
                  </v-flex>
            </v-layout>

            <v-dialog v-model="dialog_hsaddress" width="65%">
                  <v-layout align-center row>
                        <v-flex xs12>
                              <v-card tile flat color=" pa-2 teal lighten-4">
                                    <h5 class=" subtitle-1 font-weight-bold">ALAMAT</h5>
                              </v-card>
                        </v-flex>
                  </v-layout>
                  <v-card-text class="pt-2 pb-2" style="background:white">
                        <v-layout row wrap>

                              <v-flex xs12>

                                    <v-layout>


                                          <v-flex xs9>
                                                <v-flex xs12>
                                                      <v-layout class="text-truncate" pt-2>
                                                            <v-flex xs8 pa-1>
                                                                  <label>
      Place:
      <gmap-autocomplete
      style="border:1px solid #bdbdbd;width:400px;height:40px"
        @place_changed="setPlace">
      </gmap-autocomplete>
      
    <br/>
                                                </v-flex>
                                                <v-flex xs4 pa-1>Biaya: {{hsprice}}
                                                </v-flex>
                                                <v-flex xs2 pa-1>
                                                </v-flex>
                                                <v-flex xs2 pa-1>
                                                </v-flex>
                                                <v-flex xs3 pa-1>
                                               </v-flex>
                                          </v-layout>

                                    </v-flex>

<v-flex xs12 pa-1>
                                     <gmap-map
                        :center='center'
                        :zoom='16'
                        style='width:100%;  height: 400px;'
                        >
                        <gmap-marker
                            :key="index"
                            v-for="(m, index) in markers"
                            :position="m.position"
                            :clickable="true"
                            :draggable="true"
                            @dragend="updateCoordinates" 
                            @click="center=m.position"
                         
                        />
                      </gmap-map>
                      </v-flex>
                                    <v-flex xs12 pa-1>
                                    </v-flex>
                                    <v-flex xs12 pa-1>
                                          <v-text-field v-model="hslabel" label="Label" style="font-size:12px;padding:4px 0" placeholder="misal : Alamat Rumah/Kantor"></v-text-field>
                                    </v-flex>
                                  <v-flex xs12 pa-1>
                                          <v-textarea v-model="hsaddress" style="font-size:12px;padding:4px 0" auto-grow rows="3" label="Alamat"></v-textarea>
                                    </v-flex> 
                                    <v-flex xs12 pa-1>
                                          <v-textarea v-model="hsdetailaddress" style="font-size:12px;padding:4px 0" auto-grow rows="3" label="Catatan"></v-textarea>
                                    </v-flex>
<v-checkbox v-model="hsisutama" label="Sebagai Alamat HS Utama"></v-checkbox>
                                    <v-flex xs12 pa-1>
                                    </v-flex>

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

                  </v-flex>
            </v-layout>
            <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" flat @click="dialog_hsaddress = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" flat @click="saveHsAddress()">
                            Simpan
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
            
            

      </div>
</template>

<style scoped>
      .v-messages {
            display: none;
      }

      .v-input__slot {
            margin-bottom: 0px;
      }
.nota {
   font-size: 2em;
   font-weight: bold;
   text-align: left;
}
.total {
   min-height:76px;
}
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;
}

.vintage-text{
   text-shadow: 0px -2px 0px #fff, 0px 2px 3px #fff;
}

.v-input--selection-controls {
    margin-top: 0px;
    padding-top: 0px;
}

</style>

<script>
      module.exports = {
            components: {
                  'order-search-dialog': httpVueLoader('./orderSearchDialog.vue'),
                  'order-history-dialog': httpVueLoader('./orderHistoryDialog.vue'),
                  'order-photo-dialog': httpVueLoader('./oneDialogPhoto.vue')
            },
            data() {
                  return {
                        showinfo: false,
                        dialog_card: false,
                        rpt_card: '',
                        places: null,
      lat:null,
      lng:null,
      new_address:[],
      markers:[],
      current_pdefault_change: []
                  };
            },
            computed: {
                  diagnosa: {
                        get() {
                              return this.$store.state.order.diagnosa
                        },
                        set(val) {
                              this.$store.commit('order/update_diagnosa', val)
                        }
                  },
                  dialog_hsaddress: {
                        get() {
                              return this.$store.state.patient.dialog_hsaddress
                        },
                        set(val) {
                              this.$store.commit('patient/update_dialog_hsaddress', val)
                        }
                  },
                  patient() {
                        return this.$store.state.patient.selected_patient
                  },
                  s_patient() {
                        return this.$store.state.patient.s_patient
                  },
                  s_address() {
                        return this.$store.state.patient.s_address
                  },
                  hsprice: {
                        get() {
                              return this.$store.state.order.hsprice
                        },
                        set(val) {
                              this.$store.commit('order/update_hsprice', val)
                        }
                  },
                  hspatientid: {
                        get() {
                              return this.$store.state.patient.hspatientid
                        },
                        set(val) {
                              this.$store.commit('patient/update_hspatientid', val)
                        }
                  },
                  hslabel: {
                        get() {
                              return this.$store.state.patient.hslabel
                        },
                        set(val) {
                              this.$store.commit('patient/update_hslabel', val)
                        }
                  },
                  hsaddress: {
                        get() {
                              return this.$store.state.patient.hsaddress
                        },
                        set(val) {
                              this.$store.commit('patient/update_hsaddress', val)
                        }
                  },
                  hsdetailaddress: {
                        get() {
                              return this.$store.state.patient.hsdetailaddress
                        },
                        set(val) {
                              this.$store.commit('patient/update_hsdetailaddress', val)
                        }
                  },
                  hsisutama: {
                        get() {
                              return this.$store.state.patient.hsisutama
                        },
                        set(val) {
                              this.$store.commit('patient/update_hsisutama', val)
                        }
                  },
                  center: {
                        get() {
                              return this.$store.state.order.center
                        },
                        set(val) {
                              this.$store.commit('order/update_center', val)
                        }
                  },
                  patient_note: {
                        get() {
                              return this.$store.state.order.patient_note
                        },
                        set(val) {
                              this.$store.commit('order/update_patient_note', val)
                        }
                  },

                  patient_age: {
                        get() {
                              return this.$store.state.patient.selected_patient.patient_age
                        },

                        set(v) {
                              return
                        }
                  },

                  patient_dob() {
                        try {
                              return this.$store.state.patient.selected_patient.M_PatientDOB.split('-').reverse()
                                    .join('-')
                        } catch (e) {}

                  },
                  patient_photo() {
                        return this.$store.state.photo.photo_url
                  },
            },
            methods: {
                  checkTop(pat) {
                let patients = this.$store.state.patient.s_patient
                let idx = _.findIndex(patients, function (p) {
                    return p.M_PatientID == pat.M_PatientID
                });
                patients.forEach(function(t,idx) {
                  if (t.M_PatientID == pat.M_PatientID) {
                     t.M_PatientIsDefault = true
                  }else{
                      t.M_PatientIsDefault = false  
                  }
               })
               /* patients[idx].M_PatientIsDefault = !patients[idx].M_PatientIsDefault
                var selected = _.filter(patients, function (o) {
                    return o.M_PatientIsDefault;
                })
                */
                this.$store.commit("delivery/update_data_deliveries",'')
                this.$store.commit("patient/update_hspatientid", pat.patientidhs)
                this.$store.commit("patient/update_hs_name", pat.M_PatientName)
                this.$store.commit("patient/update_hs_hp", pat.M_PatientHP)
                this.$store.commit("delivery/update_xpatientid", pat.M_PatientID)
                this.$store.dispatch('delivery/search_deliveries',{type:'patient',id:pat.M_PatientID})
                this.$store.dispatch('patient/search_hsaddress',{patientid:pat.patientidhs})
            },
            changeBoxRight(p,i) {
                let saddress = this.$store.state.patient.s_address
                saddress.forEach(function(t,idx) {
                  if (t.HS_AddressID == p.HS_AddressID) {
                     t.chex = 'Y'
                  }else{
                      t.chex = 'N'  
                  }
               })
                console.log(saddress)
                this.$store.commit("patient/update_hs_price", p.hsprice)
                this.$store.commit("patient/update_hs_addressid", p.HS_AddressID)

                let tests = this.s_patient
                testvisit = 0
                testcovid = 0
                tests.forEach(function (t, idx) {
                    let visit = t.testvisit
                    let covid = t.testcovid
                    testvisit += visit
                    testcovid += covid
                })
                if(testcovid === 0 && testvisit > 0){
                    let visit = (this.$store.state.patient.hs_config.HS_ConfigSecondVisitPercent/100) * this.$store.state.patient.hs_price
                    this.$store.commit("patient/update_hs_priceother", visit)

                }
            },
                  deletePasien(patient) {
                  this.$store.dispatch("patient/delete_patient", patient)
                  },
                  update_photo() {
                        this.$store.commit('photo/update_dialog_photo', true)
                  },
                  edit_patient() {
                        this.$store.commit('patient/update_edit', true)
                        this.$store.commit('patient/update_patient_new_dialog_is_active', true)
                  },
                  saveHsAddress () {
           let prm = {
                patientid : this.hspatientid,
                label : this.hslabel,
                address : this.hsaddress,
                detail : this.hsdetailaddress,
                lat : this.lat,
                long : this.lng,
                isutama : this.hsisutama === true ? "Y" : "N"
           }

           this.$store.dispatch('patient/save_hsaddress', prm)
       },
                  getHistories(visit) {
                        console.log(visit)
                        if (parseInt(visit) > 1) {
                              this.$store.dispatch('history/search')
                        }
                  },
                  generate_card() {
                        var xid = this.$store.state.patient.selected_patient.M_PatientID
                        this.rpt_card =
                              "/birt/run?__report=report/one/fo/rpt_card.rptdesign&__format=pdf&username=admin%20&PID=" +
                              xid
                        this.dialog_card = true
                  },
                  add_hsaddress() {
                        this.dialog_hsaddress = true
                  },
                  setDescription(description) {
        this.description = description;
      },
 
      setPlace(place) {
      this.lat = place.geometry.location.lat()
      this.lng = place.geometry.location.lng()
      this.$store.dispatch('order/search_hsprice',{lat:this.lat,long:this.lng})
        var newaddrs = this.new_address
        newaddrs.address = place.formatted_address
        this.$store.commit('patient/update_hsaddress', place.formatted_address)
        newaddrs.details = ''
        newaddrs.lat = place.geometry.location.lat()
        newaddrs.lng =  place.geometry.location.lng()
        const marker = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng()
        };
        this.markers = []
        this.markers.push({ position: marker });
        this.places = []
        this.places.push(this.currentPlace);
        this.center = marker;
        

    },
    updateCoordinates(location) {
      this.center = {
        lat: location.latLng.lat(),
        lng: location.latLng.lng(),
      };
    }
            },
            watch: {
        }
      }
</script>