<template>
        <v-layout column pb-2>
            <v-card >
                <v-layout row>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">No Reg</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_no }}</div>
                            </v-flex>
                        </v-layout>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Tangal Periksa</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_date }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">PID</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ patient_mr }}</div>
                            </v-flex>
                        </v-layout>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Nama Pasien</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ patient_name }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout row>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Kel. Pelanggan</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_company }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Agreement</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_mou }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout row mb-2>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Pengirim</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ doctor_sender }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Alamat Pengirim</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ doctor_sender_address }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <v-layout row mb-2 wrap>
                    <v-flex v-for="(dlv, n) in order_delivery" xs6 v-bind:key="n">
                        <v-layout row wrap pl-2>
                            <v-flex xs4 class="label-delivery font-weight-bold">
                                {{ dlv.delivery_name }}
                            </v-flex>
                            <v-flex xs8 class="text-delivery text-xs-right">
                                <p class="mb-1">{{ dlv.description }}</p>
                                <p class="mb-1 mono red--text caption">catatan : <span v-if="dlv.note === ''">-</span> <span v-if="dlv.note !== ''">{{ dlv.note }}</span></p>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <v-layout row pa-2>
                    <v-flex xs12>

                        <table>
                            <tr style="background:#ffeaa5">
                            
                            <th style="width:42%;font-weight:bold;font-size:12px;" class="text-md-center pt-2 pb-2">PEMERIKSAAN</th>
                            <th style="width:12%;font-weight:bold;font-size:12px;" class="text-md-center pt-2 pb-2">BRUTO</th>
                            <th style="width:12%;font-weight:bold;font-size:12px;" class="text-md-center pt-2 pb-2">DISKON</th>
                            <th style="width:12%;font-weight:bold;font-size:12px;" class="text-md-center pt-2 pb-2">TOTAL</th>
                            </tr>
                           
                            <tr style="font-size:12px" v-for="t in selected_test" v-bind:key="t.T_TestID">
               
                            <td class="text-md-left pl-3">
                                <p class="mb-1">{{ t.T_TestName}}</p>
                                <p class="mb-0 caption" v-show="child_test_show(t)">{{child_test(t.child_test)}}</p>
                            </td>
                            <td class="text-md-right mono pr-2">{{ one_money(t.T_PriceAmount) }}</td>
                            <td class="text-md-right mono pr-2">{{ one_money(calc_discount(t))  }}</td>
                            <td class="text-md-right mono font-weight-black pr-2">{{ one_money(calc_netto(t)) }}</td>
                            </tr>

                            
                            <!-- TEST PANEL -->
                            <template v-for="p in selected_panel">
                            <tr class="tr-panel">
                                <td class="text-md-center">
                                    <v-icon color="red" @click="deletePanel(p)">delete</v-icon>
                                </td>
                                <td class="text-md-left pl-3 pr-2" colspan="4">{{ p.T_TestPanelName}}</td>
                            </tr>
                            <tr v-for="t in p.test" v-bind:key="t.T_TestID">
                                <td class="text-md-center">
                                    &nbsp;
                                </td>
                                <td class="text-md-left pl-3">{{ t.T_TestName}}</td>
                                <td class="text-md-right pr-2">{{ one_money(t.T_PriceAmount) }}</td>
                                <td class="text-md-right pr-2">{{ one_money(calc_discount(t))  }}</td>
                                <td class="text-md-right pr-2">{{ one_money(calc_netto(t)) }}</td>
                            </tr>
                            </template>
                            <!--/ TEST PANEL -->

                            <tfoot>
                            <tr>
                                <th style="background:#e16262;color:#fff"  class="text-md-left pl-3 pt-2 pb-2">TOTAL</th>
                                <th style="background:#e16262;color:#fff" class="text-md-right pr-2 pt-2 pb-2">{{ one_money(bruto_total)  }}</th>
                                <th style="background:#e16262;color:#fff" class="text-md-right pr-2 pt-2 pb-2">{{ one_money(diskon_total)  }}</th>
                                <th style="background:#e16262;color:#fff" class="text-md-right pr-2 pt-2 pb-2" >{{ one_money(sub_total)  }}</th>
                            </tr>
                            
                            </tfoot>
                        </table>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-2 mb-2></v-layout>
                

               
</template>

<style scoped>

.v-input--selection-controls {
    margin-top: 0px;
    padding-top: 0px;
}
.text-fajrihm{
    padding: 3px 20px 3px 0;
    text-align:left;
    font-size: 13px;
    font-family: open sans, tahoma, sans-serif;
}

.label-delivery{
     font-size: 11px;
     padding: 3px 20px 3px 0;
     font-family: open sans, tahoma, sans-serif;
}
.text-delivery{
     font-size: 12px;
     padding: 3px 20px 3px 0;
     font-family: open sans, tahoma, sans-serif;
}

.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;
}
.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;
}

</style>
<script>
module.exports = {
    methods : {
        one_money(p) {
            return window.one_money(p)
        },
        child_test(x) {
            let y = []
            for (let i in x)
                y.push(x[i].T_TestName)
            return y.join(', ')
        },

        child_test_show(t) {
            if (!t.child_test)
                return false

            if (t.child_test.length < 1)
                return false

            if (t.px_type != 'PN')
                return false

            return true
        },
         calc_netto(t) {
         return one_float(t.T_PriceAmount) - one_float(t.T_PriceDisc) / 100 * one_float(t.T_PriceAmount)
            - one_float(t.T_PriceDiscRp)
      },

      calc_discount(t) {
         return ( one_float(t.T_PriceDisc) / 100 * one_float(t.T_PriceAmount) )
            + one_float(t.T_PriceDiscRp)
      },
    },

    data() {
        return {

        }
    },

    computed : {
         selected_panel() {
         return this.$store.state.px.selected_panel
      },
      selected_test() {
         return this.$store.state.px.selected_test
      },
      discount_pembulatan() {
         //sipe : set to 0
         return 0
         let st = this.sub_total
         let part = st%1000
         if (part > 500) return part - 500
         if (part < 500 && part > 0 ) return part
         return 0
      },
      grand_total() {
         let gt = this.sub_total - this.discount_pembulatan
         return gt
      },
      sub_total() {
         let tests = this.selected_test
         sub_total = 0
         tests.forEach(function(t,idx) {
            let price = t.T_PriceAmount - t.T_PriceDisc / 100 * t.T_PriceAmount 
               - t.T_PriceDiscRp
            sub_total +=  price
         })
         let panels = this.selected_panel
         panels.forEach(function(p) {
            let tests = p.test
            tests.forEach(function(t,idx) {
               let price = t.T_PriceAmount - t.T_PriceDisc / 100 * t.T_PriceAmount 
                  - t.T_PriceDiscRp
               sub_total +=  price
            })

         })
         return sub_total
      },
      bruto_total() {
         let tests = this.selected_test
         bruto_total = 0
         tests.forEach(function(t,idx) {
            //console.log(t.T_PriceAmount)
            bruto_total +=  parseInt(t.T_PriceAmount)
            //console.log(bruto_total)
         })
         let panels = this.selected_panel
         panels.forEach(function(p) {
            let tests = p.test
            tests.forEach(function(t,idx) {
               bruto_total +=  parseInt(t.T_PriceAmount)
            })

         })
         return bruto_total
      },
      diskon_total() {
         let tests = this.selected_test
         diskon_total = 0
         tests.forEach(function(t,idx) {
            let price = parseInt(t.T_PriceDisc) / 100 * parseInt(t.T_PriceAmount) + parseInt(t.T_PriceDiscRp)
            diskon_total +=  price
         })
         let panels = this.selected_panel
         panels.forEach(function(p) {
            let tests = p.test
            tests.forEach(function(t,idx) {
               let price = parseInt(t.T_PriceDisc) / 100 * parseInt(t.T_PriceAmount) + parseInt(t.T_PriceDiscRp)
               diskon_total +=  price
            })

         })
         return diskon_total
      },
        order_no() {
            return this.$store.state.payment.selected_patient.order_no
        },
        
        order_date() {
            let x
            try {
                let z = this.$store.state.payment.selected_patient.order_date
                let y = z.split(' ')
                x = y[0].split('-').reverse().join('-') + ' ' + (y[1] ? y[1] : '')
            } catch (e) { x = '-' }
            
            return x
        },

        order_mou() {
            return this.$store.state.payment.selected_patient.order_mou
        },

        order_company() {
            return this.$store.state.payment.selected_patient.order_company
        },

        patient_name() {
            return this.$store.state.payment.selected_patient.patient_name
        },

        patient_mr() {
            return this.$store.state.payment.selected_patient.patient_mr
        },

        doctor_sender() {
            var xdoctor = this.$store.state.payment.selected_patient.doctor_sender
            if(this.$store.state.doctor.doctor_alias != '')
                xdoctor = this.$store.state.doctor.doctor_alias

            return xdoctor
        },

        doctor_sender_address() {
            var xaddress = this.$store.state.payment.selected_patient.doctor_sender_address
            if(this.$store.state.doctor.doctor_alias_address != '')
                xaddress = this.$store.state.doctor.doctor_alias_address
            return xaddress
        },

        doctor_pj() {
            return this.$store.state.payment.selected_patient.doctor_pj
        },

        order_detail() {
            return this.$store.state.payment.order_detail
        },

        order_subtotal() {
            return this.$store.state.payment.order_subtotal
        },

        order_rounding() {
            return this.$store.state.payment.order_rounding
        },

        order_total() {
            return this.$store.state.payment.order_total
        },

        order_delivery() {
            var dlvr = this.$store.state.delivery.data_deliveries
            
            return  _.filter(dlvr, function(o) { return o.chex === 'Y' })
        }
    }
}
</script>
