<template>
  <v-layout class="mb-2" column>
    <v-card class="mb-2">
      <v-layout align-center row>
        <v-flex mt-1 mb-1 xs6>
          <v-subheader font-weight-bold> BERITA ACARA [ &nbsp; <span style="color:#2196F3;font-weight: 900;">{{xnumbering}}</span> &nbsp; ]</v-subheader>
        </v-flex>
        <v-flex mt-1 align-right class="text-xs-right align-center" mb-1 xs6>
          <v-btn small @click="saveAgreement()" color="info">SIMPAN</v-btn>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>PERUSAHAAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-1 row>
        <v-flex pa-1 xs6>
          <v-autocomplete
            label="PERUSAHAAN"
            v-model="selected_company"
            :items="xcompanies"
            :search-input.sync="search_company"
            auto-select-first
            no-filter
            item-text="name"
            return-object
            :loading="isLoading"
            no-data-text="Tidak ada data perusahaan"
          >
            <template slot="item" slot-scope="{ item }">
              <v-list-tile-content>
                <v-list-tile-title v-text="item.name"></v-list-tile-title>
              </v-list-tile-content>
            </template>
          </v-autocomplete>
        </v-flex>
        <v-flex pa-1 xs3>
          <v-text-field v-model="company_cpname" label="CP [NAMA]"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs3>
          <v-text-field v-model="company_cphp" label="CP [HP]"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>LINGKUP PEKERJAAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-select
            hide-details
            item-text="name"
            return-object
            :items="xagreementtypes"
            v-model="selected_agreementtype"
            label="TIPE AGREEMENT"
          ></v-select>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-select
            hide-details
            :readonly="_.isEmpty(selected_company)"
            item-text="name"
            return-object
            :items="xmou"
            v-model="selected_mou"
            label="MOU"
          ></v-select>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs4>
          <v-textarea v-model="participants" label="JUMLAH PESERTA" auto-grow outlined rows="1"></v-textarea>
        </v-flex>
        <v-flex pa-1 xs4>
          <v-textarea v-model="resulttype_report" auto-grow outlined rows="1" label="SISTEM PELAPORAN HASIL"></v-textarea>
        </v-flex>
        <v-flex pa-1 xs4>
          <v-textarea v-model="special_requirement" auto-grow outlined rows="1" label="PERSYARATAN LAINNYA"></v-textarea>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>PELAKSANAAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-text-field v-model="implementation_date" label="TANGGAL PELAKSANAAN" hide-details></v-text-field>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-text-field v-model="implementation_time" label="WAKTU PELAKSANAAN" hide-details></v-text-field>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-text-field v-model="implementation_place" label="TEMPAT PELAKSANAAN"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-text-field v-model="setupinstrument_time" label="WAKTU PASANG ALAT"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>KESEPAKATAN HARGA</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs4>
          <v-text-field v-model="normal_price" hide-details label="HARGA NORMAL"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs4>
          <v-text-field v-model="agreement_price" hide-details label="HARGA KESEPAKATAN"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs4>
          <v-text-field v-model="discount_price" hide-details label="DISKON"></v-text-field>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-text-field v-model="billing_system" label="SISTEM PENAGIHAN"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-text-field v-model="duedate" label="JATUH TEMPO [HARI]" hint="maks. setelah invoice diterima"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>FASILITAS</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs12>
          <v-text-field v-model="foods" label="MAKAN PAGI / SNACK"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>PENYERAHAN HASIL PEKERJAAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-text-field v-model="sendresult_date" hint="maks. setelah MCU" label="WAKTU PENYERAHAN [HARI]"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-text-field v-model="sendresult_place" label="TEMPAT PENAGIHAN"></v-text-field>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs6>
          <v-text-field v-model="sendresult_cpname" label="CP [NAMA]"></v-text-field>
        </v-flex>
        <v-flex pa-1 xs6>
          <v-text-field v-model="sendresult_cphp" label="CP [HP]" ></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>JANJI HASIL SISTEM</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex xs6 pa-1>
          <v-menu 
              v-model="menufilterdatestart"
              :close-on-content-click="false"
              :nudge-right="40"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              max-width="290px"
              min-width="290px"
              >
              <template v-slot:activator="{ on }">
                <v-text-field
                    v-model="filterComputedDateFormattedStart"
                    label="Tanggal Pelaksanaan"
                    
                    hide-details
                    readonly
                    v-on="on"
                    @blur="date = deFormatedDate(filterComputedDateFormattedStart)"
                ></v-text-field>
              </template>
              <v-date-picker v-model="xdatestart" no-title @input="menufilterdatestart = false"></v-date-picker>
          </v-menu>
        </v-flex>
        <v-flex xs6 pa-1>
          <v-menu 
              v-model="menufilterdateend"
              :close-on-content-click="false"
              :nudge-right="40"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              max-width="290px"
              min-width="290px"
              >
              <template v-slot:activator="{ on }">
                <v-text-field
                    v-model="filterComputedDateFormattedEnd"
                    label="Tanggal Selesai"
                    
                    hide-details
                    readonly
                    v-on="on"
                    @blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
                ></v-text-field>
              </template>
              <v-date-picker v-model="xdateend" no-title @input="menufilterdateend = false"></v-date-picker>
          </v-menu>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex xs2 pa-1>
          <v-text-field
            label="Bulan"
            v-model="xmonth"
          ></v-text-field>
        </v-flex>
        <v-flex xs2 pa-1>
          <v-text-field
            label="Minggu"
            v-model="xweek"
          ></v-text-field>
        </v-flex>
        <v-flex xs2 pa-1>
          <v-text-field
            label="Hari"
            v-model="xday"
          ></v-text-field>
        </v-flex>
          <v-flex xs2 pa-1>
            <v-text-field
              label="Jam (hh:mm)"
              v-model="attime"
            ></v-text-field>
          </v-flex>
          <v-flex xs4 pa-1>
            <v-checkbox  v-model="flagattime" label="Pada Jam ?"></v-checkbox>
          </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>PELAKSANA PEMASARAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 xs12>
          <v-text-field v-model="marketing_staff" label="NAMA STAF"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>CATATAN</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex pa-1 pt-1 xs12>
          <v-textarea v-model="notes" style="padding-top:0" auto-grow outlined rows="1" single-line></v-textarea>
        </v-flex>
      </v-layout>
    </v-card>
  </v-layout>
</template>

<style scoped>
</style>

<script>
module.exports = {
  data: () => ({
    search_company: "",
    isLoading: false,
    days: [
      { id: "1", name: "Minggu" },
      { id: "2", name: "Senin" },
      { id: "3", name: "Selasa" },
      { id: "4", name: "Rabu" },
      { id: "5", name: "Kamis" },
      { id: "6", name: "Jumat" },
      { id: "7", name: "Sabtu" }
    ],
    weeks: [
      { id: "1", name: "Pertama" },
      { id: "2", name: "Kedua" },
      { id: "3", name: "Ketiga" },
      { id: "4", name: "Keempat" }
    ],
    months:[
      { id: "1", name: "Januari" },
      { id: "2", name: "Pebruari" },
      { id: "3", name: "Maret" },
      { id: "4", name: "April" },
      { id: "5", name: "Mei" },
      { id: "6", name: "Juni" },
      { id: "7", name: "Juli" },
      { id: "8", name: "Agustus" },
      { id: "9", name: "September" },
      { id: "10", name: "Oktober" },
      { id: "11", name: "Nopember" },
      { id: "12", name: "Desember" }
    ],
    menufilterdatestart:false,
     menufilterdateend:false,
  }),
  computed: {
    seletedmonth: {
      get() {
        return this.$store.state.samplecall.selected_month
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_month", val)
      }
    },
    seletedweek: {
      get() {
        return this.$store.state.samplecall.selected_week
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_week", val)
      }
    },
    seletedday: {
      get() {
        return this.$store.state.samplecall.selected_day
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_day", val)
      }
    },
    xmonth: {
      get() {
        return this.$store.state.samplecall.xmonth
      },
      set(val) {
        this.$store.commit("samplecall/update_xmonth", val)
      }
    },
    xweek: {
      get() {
        return this.$store.state.samplecall.xweek
      },
      set(val) {
        this.$store.commit("samplecall/update_xweek", val)
      }
    },
    xday: {
      get() {
        return this.$store.state.samplecall.xday
      },
      set(val) {
        this.$store.commit("samplecall/update_xday", val)
      }
    },
    xhour: {
      get() {
        return this.$store.state.samplecall.xhour
      },
      set(val) {
        this.$store.commit("samplecall/update_xhour", val)
      }
    },
    flagattime: {
      get() {
        return this.$store.state.samplecall.flagattime
      },
      set(val) {
        this.$store.commit("samplecall/update_flagattime", val)
      }
    },
    attime: {
      get() {
        return this.$store.state.samplecall.attime
      },
      set(val) {
        this.$store.commit("samplecall/update_attime", val)
      }
    },
    xnumbering() {
      return this.$store.state.samplecall.trx_numbering;
    },
    xstatus() {
      return this.$store.state.samplecall.selected_status;
    },
    xcompanies() {
      return this.$store.state.samplecall.companies;
    },
    selected_company: {
      get() {
        return this.$store.state.samplecall.selected_company;
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_company", val);
        this.$store.dispatch("samplecall/getmou", { company: val });
      }
    },
    xagreementtypes() {
      return this.$store.state.samplecall.agreement_types;
    },
    selected_agreementtype: {
      get() {
        return this.$store.state.samplecall.selected_agreement_type;
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_agreement_type", val);
      }
    },
    xmou() {
      return this.$store.state.samplecall.mou
    },
    selected_mou: {
      get() {
        return this.$store.state.samplecall.selected_mou
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_mou", val);
      },
    },
    company_cpname : {
      get() {
        return this.$store.state.samplecall.company_cpname
      },
      set(val) {
        this.$store.commit("samplecall/update_company_cpname", val);
      },
    },
    company_cphp : {
      get() {
        return this.$store.state.samplecall.company_cphp
      },
      set(val) {
        this.$store.commit("samplecall/update_company_cphp", val)
      },
    },
    participants : {
      get() {
        return this.$store.state.samplecall.participants
      },
      set(val) {
        this.$store.commit("samplecall/update_participants", val)
      },
    },
    resulttype_report : {
      get() {
        return this.$store.state.samplecall.resulttype_report
      },
      set(val) {
        this.$store.commit("samplecall/update_resulttype_report", val)
      },
    },
    special_requirement : {
      get() {
        return this.$store.state.samplecall.special_requirement
      },
      set(val) {
        this.$store.commit("samplecall/update_special_requirement", val)
      },
    },
    implementation_date : {
      get() {
        return this.$store.state.samplecall.implementation_date
      },
      set(val) {
        this.$store.commit("samplecall/update_implementation_date", val)
      },
    },
    implementation_time : {
      get() {
        return this.$store.state.samplecall.implementation_time
      },
      set(val) {
        this.$store.commit("samplecall/update_implementation_time", val)
      },
    },
    implementation_place : {
      get() {
        return this.$store.state.samplecall.implementation_place
      },
      set(val) {
        this.$store.commit("samplecall/update_implementation_place", val)
      },
    },
    setupinstrument_time : {
      get() {
        return this.$store.state.samplecall.setupinstrument_time
      },
      set(val) {
        this.$store.commit("samplecall/update_setupinstrument_time", val)
      },
    },
    normal_price : {
      get() {
        return this.$store.state.samplecall.normal_price
      },
      set(val) {
        this.$store.commit("samplecall/update_normal_price", val)
      },
    },
    agreement_price : {
      get() {
        return this.$store.state.samplecall.agreement_price
      },
      set(val) {
        this.$store.commit("samplecall/update_agreement_price", val)
      },
    },
    discount_price : {
      get() {
        return this.$store.state.samplecall.discount_price
      },
      set(val) {
        this.$store.commit("samplecall/update_discount_price", val)
      },
    },
    duedate : {
      get() {
        return this.$store.state.samplecall.duedate
      },
      set(val) {
        this.$store.commit("samplecall/update_duedate", val)
      },
    },
    sendresult_date : {
      get() {
        return this.$store.state.samplecall.sendresult_date
      },
      set(val) {
        this.$store.commit("samplecall/update_sendresult_date", val)
      },
    },
    sendresult_place : {
      get() {
        return this.$store.state.samplecall.sendresult_place
      },
      set(val) {
        this.$store.commit("samplecall/update_sendresult_place", val)
      },
    },
    billing_system : {
      get() {
        return this.$store.state.samplecall.billing_system
      },
      set(val) {
        this.$store.commit("samplecall/update_billing_system", val)
      },
    },
    sendresult_cpname : {
      get() {
        return this.$store.state.samplecall.sendresult_cpname
      },
      set(val) {
        this.$store.commit("samplecall/update_sendresult_cpname", val)
      },
    },
    sendresult_cphp : {
      get() {
        return this.$store.state.samplecall.sendresult_cphp
      },
      set(val) {
        this.$store.commit("samplecall/update_sendresult_cphp", val)
      },
    },
    marketing_staff : {
      get() {
        return this.$store.state.samplecall.marketing_staff
      },
      set(val) {
        this.$store.commit("samplecall/update_marketing_staff", val)
      },
    },
    notes : {
      get() {
        return this.$store.state.samplecall.notes
      },
      set(val) {
        this.$store.commit("samplecall/update_notes", val)
      },
    },
    foods : {
      get() {
        return this.$store.state.samplecall.foods
      },
      set(val) {
        this.$store.commit("samplecall/update_foods", val)
      },
    },
    readonlyhour: {
      get() {
        return this.$store.state.samplecall.readonlyhour
      },
      set(val) {
        this.$store.commit("samplecall/update_readonlyhour", val)
      },
    },
    readonlyattime: {
      get() {
        return this.$store.state.samplecall.readonlyattime
      },
      set(val) {
        this.$store.commit("samplecall/update_readonlyattime", val)
      },
    },
    xdatestart : {
        get() {
          return this.$store.state.samplecall.start_date
        },
        set(val) {
          this.$store.commit("samplecall/update_start_date",val)
        }
    },
    xdateend : {
         get() {
            return this.$store.state.samplecall.end_date
         },
         set(val) {
            this.$store.commit("samplecall/update_end_date",val)
         }
      },
    filterComputedDateFormattedStart () {
         return this.formatDate(this.xdatestart)
      },
    filterComputedDateFormattedEnd () {
         return this.formatDate(this.xdateend)
      },
  },
  methods: {
    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')}`
      },
    changeAttime(value){
        this.xhour = value === true ? 0:this.xhour
        this.readonlyhour = value === true ? true:false
        this.attime = value === true ? this.attime:""
        this.readonlyattime = value === true ? false:true
    },
    processSample(sampletype) {
      var patient = this.$store.state.samplecall.selected_patient;
      var msg =
        "Anda yakin akan melakukan proses untuk " +
        sampletype.T_SampleTypeName +
        " dari " +
        patient.patient_fullname +
        " ? ";
      this.$store.commit("samplecall/update_msg_action", msg);
      this.$store.commit("samplecall/update_act", "samplingprocess");
      this.$store.commit("samplecall/update_selected_sampletype", sampletype);
      this.$store.commit("samplecall/update_dialog_action", true);
    },
    doneSample(sampletype) {
      var patient = this.$store.state.samplecall.selected_patient;
      var msg =
        "Anda yakin proses untuk " +
        sampletype.T_SampleTypeName +
        " dari " +
        patient.patient_fullname +
        " telah selesai ? ";
      this.$store.commit("samplecall/update_msg_action", msg);
      this.$store.commit("samplecall/update_act", "samplingdone");
      this.$store.commit("samplecall/update_selected_sampletype", sampletype);
      this.$store.commit("samplecall/update_dialog_action", true);
    },
    thr_search_company: _.debounce(function() {
      this.$store.dispatch("samplecall/searchcompany", this.search_company);
    }, 2000),
    saveAgreement(){
        prm = {
            trx_id:this.$store.state.samplecall.trx_id,
            company:this.selected_company,
            agreement_type:this.selected_agreementtype,
            mou:this.selected_mou,
            company_cpname:this.company_cpname,
            company_cphp:this.company_cphp,
            participants:this.participants,
            resulttype_report:this.resulttype_report,
            special_requirement:this.special_requirement,
            implementation_date:this.implementation_date,
            implementation_time:this.implementation_time,
            implementation_place:this.implementation_place,
            setupinstrument_time:this.setupinstrument_time,
            normal_price:this.normal_price,
            agreement_price:this.agreement_price,
            discount_price:this.discount_price,
            billing_system:this.billing_system,
            duedate:this.duedate,
            sendresult_date:this.sendresult_date,
            sendresult_place:this.sendresult_place,
            sendresult_cpname:this.sendresult_cpname,
            sendresult_cphp:this.sendresult_cphp,
            marketing_staff:this.marketing_staff,
            notes:this.notes,
            foods:this.foods,
            xmonth:this.xmonth,
            xweek:this.xweek,
            xday:this.xday,
            flagattime:this.flagattime === true ? 'Y':'N',
            attime:this.attime,
            startdate:this.xdatestart,
            enddate:this.xdateend
        }
        this.$store.dispatch("samplecall/saveagreement", prm);
    }
  },
  watch: {
    search_company(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.samplecall.update_autocomplete_status == 1) return;
      this.thr_search_company();
    }
  }
};
</script>
