<template>
    <v-layout class="mb-2" column >
        <v-dialog v-model="dialogconfirmationdelete" persistent  max-width="290">
            <v-card>
                <v-card-title
                    dark
                    class="headline error pt-2 pb-2"
                    primary-title
                    style="color:white"
                >
                    <h4 dark>Konfirmasi</h4>
                </v-card-title>
                <v-card-text>
                    {{msgconfirmationdelete}}
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                    <v-btn small color="error darken-1 text-sm-left" flat @click="doDeleteData()">Hapus</v-btn>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdelete = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-card class="mb-2">
            <v-layout row>
                <v-flex  xs12>
                    <v-subheader red--text text--lighten-1> TUGAS DADAKAN
                    <v-flex text-md-right>
                        <v-btn  v-if="xact === 'edit'" @click="deleteData()" small color="error">Hapus</v-btn>
                        <v-btn  v-if="xact === 'new'" @click="saveData()" small color="primary">Simpan</v-btn>
                    </v-flex>
                    </v-subheader>
                    <v-divider></v-divider>
                    <v-layout row wrap>
                        <v-flex xs12 pa-2>
                            <v-layout row>
                                <v-flex xs4 pa-1>
                                    <v-menu class="pr-2"
                                        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
                                            class="mt-1"
                                            v-model="filterComputedDateFormattedStart"
                                            label="Tanggal*"
                                            hide-details
                                            v-on="on"
                                            @blur="date = deFormatedDate(filterComputedDateFormattedStart)"
                                            ></v-text-field>
                                        </template>
                                        <v-date-picker v-model="xtransactiondate" no-title @input="menufilterdatestart = false"></v-date-picker>
                                    </v-menu>
                                    
                                </v-flex>
                                <v-flex xs2 pa-1>
                                   <v-text-field placeholder="hh:mm" hide-details v-model="xtime" label="Jam*"></v-text-field>
                                   
                                </v-flex>
                                <v-flex xs6 pa-1>
                                   <v-text-field v-model="xtasklabel" label="Label Tugas*"></v-text-field>
                                   
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12>
                                    <p  v-if="checkError('requiredate')" class="error pl-2 pr-2" style="color:#fff">Format penulisan "dd-mm-yyyy", contoh : 22-06-1988</p>
                                    <p  v-if="checkError('requiretime')" class="error pl-2 pr-2" style="color:#fff">Format penulisan "hh:mm", contoh : 17:50</p>
                                    <p  v-if="checkError('requirelabel')" class="error pl-2 pr-2" style="color:#fff">Label diisi dong</p>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12 mb-2>
                                     <v-select
                                        hide-details
                                        item-text="name"
                                        return-object
                                        outline
                                        :items="xcouriers" 
                                        v-model="xselected_courier"
                                        class="mini-select"
                                        label="Kurir*"
                                    ></v-select>
                                    <p  v-if="checkError('requirecourier')" class="error pl-2 pr-2" style="color:#fff">Kurirnya dong, dipilih</p>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12>
                                    <v-textarea
                                        filled
                                        outline
                                       hide-details
                                        label="Deskripsi Tugas"
                                        v-model="xnote"
                                        rows="3"
                                    ></v-textarea>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>          
        </v-card>
        <v-card>
            <v-layout row>
                <v-flex  xs12>
                    <v-subheader red--text text--lighten-1>DETAIL ALAMAT</v-subheader>
                    <v-divider></v-divider>
                    <v-layout class="mt-2" row wrap>
                        <v-flex xs12>
                            <v-layout row>
                                <v-flex xs12 pa-1>
                                    <v-autocomplete
                                        label="Kota"
                                        v-model="xselectedcity"
                                        class="ma-1 mini-select"
                                        :items="xcities"
                                        outline
                                        :search-input.sync="search_city"
                                        auto-select-first
                                        hide-details
                                        no-filter
                                        item-text="name"
                                        return-object
                                        :loading="isLoading"
                                        no-data-text="Pilih Kota"
                                        >
                                        <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-layout>
                            <v-layout row>
                                <v-flex xs12 pa-1>
                                   <v-select class="mini-select ma-1" :items="xdistricts" 
                                        item-text="name"
                                        return-object
                                        v-model="xselecteddistrict"
                                        label="Kecamatan*" placeholder="Pilih salah satu" outline   hide-details></v-select>
                                   
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex x12 pa-1>
                                   <v-select class="mini-select ma-1" :items="xkelurahans" 
                                        item-text="name"
                                        return-object
                                        v-model="xselectedkelurahan"
                                        placeholder="Pilih salah satu"
                                        label="Kelurahan*" outline   hide-details></v-select>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12>
                                    <p  v-if="checkError('requiredistrict')" class="error pl-2 pr-2" style="color:#fff">Kecamatan dipilih dong</p>
                                    <p  v-if="checkError('requirekelurahan')" class="error pl-2 pr-2" style="color:#fff">Kelurahan dipilih dong</p>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12 pt-1 pl-2 pr-2 pb-2>
                                    <v-textarea
                                        filled
                                        outline
                                        hide-details
                                        label="Catatan / Alamat lengkap"
                                        v-model="xaddressnote"
                                        rows="3"
                                    ></v-textarea>
                                </v-flex>
                            </v-layout> 
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>          
        </v-card>
    </v-layout>
</template>

<style scoped>
    table, td, th {  
    border: 1px solid #ddd;
    text-align: left;
    }

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 5px;
    }

    .mini-input .v-input{
        margin-top: 0px; 
    }

    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
        margin-top: 0px; 
        margin-bottom:0px;
        margin-left:3px;
    }
    .mini-input .v-messages{
        min-height:0px;
    }
    input.fhm-input{
        border: 1px solid black; 
        border-radius: 2px;
        -webkit-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        -moz-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        padding: 2px 4px;
        background: rgba(255,255,255,0.5);
        margin: 0 0 1px 0;
        width:30px;
        text-align:center;
    }
</style>

<script>
module.exports = {
    data: () => ({
        menufilterdatestart:false,
        date:'',
        search_city:''
    }),
    computed: {
        dialogconfirmationdelete:{
            get() {
                return this.$store.state.doctor.dialog_confirmation_delete
            },
            set(val) {
                this.$store.commit("doctor/update_dialog_confirmation_delete",val)
            }
        },
        msgconfirmationdelete(){
            return  this.$store.state.doctor.msg_confirmation_delete
        },
        xact() {
            return  this.$store.state.doctor.act
        },
        detail() {
            return  this.$store.state.doctor.selected_doctor
        },
        xnote:{
            get() {
                return this.$store.state.doctor.task_note
            },
            set(val) {
                this.$store.commit("doctor/update_task_note",val)
                this.$store.commit("doctor/update_no_save",1)
            }
        },
        xaddressnote:{
            get() {
                return this.$store.state.doctor.address_note
            },
            set(val) {
                this.$store.commit("doctor/update_address_note",val)
                this.$store.commit("doctor/update_no_save",1)
            }
        },
        xcouriers(){
            return this.$store.state.doctor.couriers
        },
        xselected_courier:{
            get() {
                return this.$store.state.doctor.selected_courier
            },
            set(val) {
                this.$store.commit("doctor/update_selected_courier",val)
                this.$store.commit("doctor/update_no_save",1)
            }
        },
        xtransactiondate : {
            get() {
                return this.$store.state.doctor.transaction_date
            },
            set(val) {
                this.$store.commit("doctor/update_transaction_date",val)
            }
        },
        xtime:{
            get() {
                return this.$store.state.doctor.transaction_time
            },
            set(val) {
                this.$store.commit("doctor/update_transaction_time",val)
            }
        },
        xtasklabel:{
            get() {
                return this.$store.state.doctor.task_label
            },
            set(val) {
                var xval = val.toUpperCase()
                this.$store.commit("doctor/update_task_label",xval)
            }
        },
        filterComputedDateFormattedStart () {
            return this.formatDate(this.xtransactiondate)
        },
        xcities() {
            return this.$store.state.doctor.cities_form
        },
        xselectedcity: {
            get() {
                return this.$store.state.doctor.selected_city_form
            },
            set(val) {
                this.$store.commit("doctor/update_selected_city_form",val)
                this.$store.dispatch("doctor/vgetdistrict",{M_CityID:val.id})
            }
        },
        xdistricts() {
            return this.$store.state.doctor.districts_form
        },
        xselecteddistrict: {
            get() {
                return this.$store.state.doctor.selected_district_form
            },
            set(val) {
                this.$store.commit("doctor/update_selected_district_form",val)
                this.$store.dispatch("doctor/getkelurahanform",{id:val.id})
            }
        },
        xkelurahans() {
            return this.$store.state.doctor.kelurahans_form
        },
        xselectedkelurahan: {
            get() {
                return this.$store.state.doctor.selected_kelurahan_form
            },
            set(val) {
                this.$store.commit("doctor/update_selected_kelurahan_form",val)
            }
        },
    },
    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')}`
        },
        checkError(value){
            var errors = this.$store.state.doctor.errors
            if(errors.includes(value)){
                return true
            }
            else{
                return false
            }
        },
        changeBtnFlagPJ(value){
            var newval = (value === 'Y')?'N':'Y'
            this.xpj = newval
        },
        changeBtnFlagDefaultPJ(value){
            var newval = (value === 'Y')?'N':'Y'
            this.xdpj = newval
        },
        changeBtnFlagDefault(value){
            var newval = (value === 'Y')?'N':'Y'
            this.xdefault = newval
        },
        changeBtnFlagClinic(value){
            var newval = (value === 'Y')?'N':'Y'
            this.xclinic = newval
        },
        changeBtnFlagMarketing(value){
            var newval = (value === 'Y')?'N':'Y'
            this.xmarketingconfirm = newval
        },
        saveData(){
            this.$store.commit("doctor/update_errors",[])
            var errors = this.$store.state.doctor.errors

            if(this.xtasklabel === ''){
                errors.push("requirelabel")
            }
            var DateX   = moment(this.xtransactiondate, 'YYYY-MM-DD', true)
            var isValidDateX = DateX.isValid()
            if(!isValidDateX){
                errors.push("requiredate")
            }
            var TimeX   = moment(this.xtime, 'hh:mm', true)
            var isValidTimeX = TimeX.isValid()
            if(!isValidTimeX){
                errors.push("requiretime")
            }
            if(_.isEmpty(this.xselecteddistrict, true)){
                errors.push("requiredistrict")
            }
            if(_.isEmpty(this.xselectedkelurahan, true)){
                errors.push("requirekelurahan")
            }
            if(errors.length === 0){
                var prm = {}
                prm.xdate = this.xtransactiondate
                prm.courier = this.$store.state.doctor.selected_courier
                prm.xtime = this.xtime
                prm.xlabel = this.xtasklabel
                prm.xnote = this.xnote
                prm.kelurahan = this.$store.state.doctor.selected_kelurahan_form
                prm.status = this.$store.state.doctor.selected_status.value
                prm.current_page = 1
                prm.lastid = -1
                prm.filter_city = this.$store.state.doctor.selected_city
                prm.filter_district = this.$store.state.doctor.selected_district
                prm.filter_kelurahan = this.$store.state.doctor.selected_kelurahan
                console.log(this.xtransactiondate)
                console.log(prm)
                this.$store.dispatch("doctor/savenewtask",prm)
            }
        },
        saveNewDoctor(){
            this.$store.commit("doctor/update_errors",[])
            var errors = this.$store.state.doctor.errors
            if(this.xdoctorname === ''){
                errors.push("requirename")
            }
            if(_.isEmpty(this.xsex)){
                errors.push("requiresex")
            }
            if(_.isEmpty(this.xreligion)){
                errors.push("requirereligion")
            }
            if(errors.length === 0){
                var prm = {}
                prm.M_DoctorID = 0
                prm.M_DoctorPrefix = this.xpreffix
                prm.M_DoctorName = this.xdoctorname
                prm.M_DoctorSufix = this.xsuffix
                prm.M_DoctorM_SexID = this.$store.state.doctor.selected_sex.M_SexID
                prm.M_DoctorM_ReligionID = this.$store.state.doctor.selected_religion.M_ReligionID
                prm.M_DoctorEmail = this.xemail
                prm.M_DoctorHP = this.xhp
                prm.M_DoctorPhone = this.xphone
                prm.M_DoctorIsMarketingConfirm = this.xmarketingconfirm
                prm.M_DoctorIsPJ = this.xpj
                prm.M_DoctorIsDefaultPJ = this.xdpj
                prm.M_DoctorIsClinic = this.xclinic
                prm.M_DoctorIsDefault = this.xdefault
                this.$store.dispatch("doctor/newdoctor",prm)
            }
        },
        deleteData(){
            let msg = "Yakin, akan menghapus data dokter "+this.xdoctorname+" ?"
            this.$store.commit("doctor/update_msg_confirmation_delete",msg)
            this.$store.commit("doctor/update_dialog_confirmation_delete",true)
        },
        doDeleteData(){
            var prm = {}
            prm.M_DoctorID = this.$store.state.doctor.selected_doctor.M_DoctorID
            prm.M_DoctorPrefix = this.xpreffix
            prm.M_DoctorName = this.xdoctorname
            prm.M_DoctorSufix = this.xsuffix
            this.$store.dispatch("doctor/delete",prm)
        },
        thr_search_city: _.debounce( function () {
            this.$store.dispatch("doctor/vsearchcity",this.search_city)
        },2000),
    },
     watch: {
        search_city(val,old) {
            if (val == old ) return
            if (! val) return
            if (val.length < 1 ) return
            if (this.$store.state.doctor.update_autocomplete_status == 1 ) return
            this.thr_search_city()
        }
   },
}
</script>
