<template>
<div class="container-fluid">
  <section class="content">
    <div class="header pb-2">
      <div class="header-body">
        <div class="row align-items-center py-2">
          <div class="col-lg-6 col-5 text-right">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
              <span v-html="customer" class="customer"></span>
            <hr class="mt-4">
            <div class="row d-flex justify-content-between px-3 mt-4" >
              <div style="font-size:20px;">ລວມ:</div>
              <div style="font-size:20px;">{{formatPrice(totalAmount)}} ກີບ</div>
            </div>
            <div class="row d-flex justify-content-between px-3 mt-4" >
              <div style="font-size:20px;">ສ່ວນຫຼຸດ:</div>
              <div style="font-size:20px;">(-) {{formatPrice(Discount)}} ກີບ</div>
            </div>
            <div class="row d-flex justify-content-between px-3 mt-4" >
              <div style="font-size:20px;">ອມພ(10%):</div>
              <div style="font-size:20px;">(+) {{formatPrice(Tax)}} ກີບ</div>
            </div>
            <div class="total p-2 mt-2">
              <div class="row d-flex justify-content-center px-3 mt-4" >
                <div style="font-size:24px;">ລວມເງິນທີ່ຈະຕ້ອງຊຳລະ</div>
              </div>
              <div class="row d-flex justify-content-center px-3 mt-4 " >
                <div style="font-size:30px;">{{formatPrice(Allprice)}} ກີບ</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="card">
          <!-- Card header -->
          <div class="card-header border-0">
            <div class="row">
                <h2 class="mb-0 customer">ພະນັກງານຂາຍ: {{staff}}</h2>
            </div>
          </div>

          <!-- Light table -->
          <div class="table-responsive">
            <table class="table align-items-center table-flush">
              <thead class="thead-light" >
                <tr>
                  <th width="60" class="headtb text-center" >ລຳດັບ</th>
                  <th class="headtb text-center" >ລາຍກນສິນຄ້າ/ບໍລິການ</th>
                  <th class="headtb text-right" >ລາຄາ</th>
                  <th class="headtb text-center" >ຈຳນວນ</th>
                  <th class="headtb text-right" >ລວມ</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(list, index) in $store.state.posbill.listbill" :key="list.id">
                  <th class="text-center">{{index+1}}</th>
                  <td class="table-user headtd text-left">
                     {{list.product_name}}
                  </td>
                  <td class="headtd text-right">
                    {{formatPrice(list.price)}}
                  </td>
                  <td class="headtd text-center">
                    {{list.count}}
                  </td>
                  <td class="headtd text-right">
                     {{formatPrice(list.price*list.count)}}
                  </td>
                </tr>
              </tbody>
            </table>
            <hr>

          </div>
        </div>
      </div>

      
    </div>
  </section>
</div>
</template>

<script>
export default {
  name: "order",

  components: {},
  directives: {},
  watch:{

  },
  data() {
    return {
      editmode: false,
      listbill: '',
      DiscountOrder:'',
      isLoggedIn: false,
    };
  },

  computed: {
    staff(){
      if(this.$store.state.posbill.customer){
        let staff = this.$store.state.posbill.customer[0].staff
        return staff
      }

    },
    customer(){
      if(this.$store.state.posbill.customer){
         let cusse = this.$store.state.posbill.customer[0].customerSelect
          let listcus = this.$store.state.posbill.customer[0].listCustomer
          let cusType = this.$store.state.posbill.customer[0].CustomerSe

      if(cusse == '0'){
          return '<i class="fas fa-user"></i>: ລູກຄ້າທົ່ວໄປ ເຂົ້າມາໃນຮ້ານ';
      } else {
          if(cusType == 'true'){
              let address = listcus.Customer_address?listcus.Customer_address:''
              return '<i class="fas fa-user"></i>: '+ listcus.Customer_name +'<br><i class="fas fa-mobile-alt"></i>: '+listcus.Customer_tel +'<br><i class="fas fa-map-marker-alt"></i>: '+address;
          } else if(cusType == 'false') {
              let address = listcus.Customer_address?listcus.Customer_address:''
              return '<i class="fas fa-user"></i>: '+ listcus.Customer_name +'<br><i class="fas fa-mobile-alt"></i>: '+listcus.Customer_tel +'<br><i class="fas fa-map-marker-alt"></i>: '+address;
          }
      }
      }


    },
  
     totalAmount() {
      return this.$store.state.posbill.listbill.reduce(
        (num, item) => num + item.price * item.count,
        0
      );
    },
    totalCount() {
      return this.$store.state.posbill.listbill.reduce(
        (num, item) => num + item.count,
        0
      );
    },
    Discount(){
        if(this.$store.state.posbill.option[0]){
         return this.$store.state.posbill.option[0].discount;
       } else { return'0' }
    },
    Tax(){
        if(this.$store.state.posbill.option[0]){
         return this.$store.state.posbill.option[0].tax;
       } else { return'0' }
    },
    AlltotalAmount() {
     /// console.log(this.$store.state.posbill.listbill)
      if (this.totalAmount) {
       // let all = this.$store.state.posbill.listbill.reduce((count, item) => parseInt(count) + parseInt(item.count), 0);
        return this.$store.state.posbill.listbill.reduce((count, item) => parseInt(count) + parseInt(item.count), 0);
      } else {
        return "0";
      }
    },

     Allprice(){
       if(this.$store.state.posbill.option){
         return this.totalAmount-this.Discount+this.Tax
       } else { return'0' }
    },

    billTax_ca() {
      if (this.ListBilldata[0].tax) {
        return ((this.totalAmount - this.Discount) * this.Tax/100);
      } else {
        return "";
      }
    },
  },
  methods: {

   formatPrice(value) {
      let val = (value / 1).toFixed(0).replace(".", ",");
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    searchCustomer(e) {
      if (!this.search) {
        this.doSearch();
      }
      if (e.which === 13) {
        this.doSearch();
      }
    },

  },
  created() {


    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    })

    if(window.Laravel.isLoggedin){
           this.isLoggedIn = true
        }

  },
  beforeRouteEnter(to, from, next) {
    if (!window.Laravel.isLoggedin) {
      window.location.href = "/";
    }
    next();
  },
};
</script>

<style lang="scss" scoped>
.card .table th{
  font-size: 18px;
}
.card .table td{
  font-size: 18px;
}
.headtb{
  font-size:16px;
}
.headtd{
  font-size:16px;
}
.customer{
  font-size: 18px;
}
.total{
  font-weight: bold;
  color: whitesmoke;
  background-color:#257cff;
  border-radius: 10px;
}

</style>
