<template>
<div class="container-fluid">
    <section class="content">
        <div class="header pb-2">
          <div class="header-body">
            <div class="row align-items-center py-4">
              <div class="col-lg-6 col-7">
                <nav
                  aria-label="breadcrumb"
                  class="d-none d-md-inline-block ml-md-4"
                >
                  <ol class="breadcrumb breadcrumb-links">
                    <li class="breadcrumb-item">
                      <a href="#"><i class="fas fa-home"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="#">Dashboards</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                      ຮັບສັ່ງເຄື່ອງ
                    </li>
                  </ol>
                </nav>
              </div>
              <div class="col-lg-6 col-5 text-right">

              </div>
            </div>
          </div>
        
      </div>
        <div class="row" v-if="isLoggedIn">
      <div class="col-lg-3" >
        <div class="card card-pricing border-0 text-center mb-4" v-if="$store.getters['getroles'].includes('preorder_add')">
          <div class="card-body">
            <div class="display-2"><i class="fas fa-cart-plus"></i></div>
            <button
              type="button"
              @click="$router.push('preorder/add')"
              class="btn btn-primary mb-3"
            >
              ຮັບສັ່ງເຄື່ອງ
            </button>
          </div>
        </div>
   
      </div>
      <div class="col-lg-9">
        <div class="card">
          <!-- Card header -->
          <div class="card-header border-0">
            <div class="row">
              <div class="col-6">
                <h3 class="mb-0">ລາຍການສັ່ງເຄື່ອງ</h3>
              </div>
              <div class="col-6 text-right">
                <div class="form-group" style="margin-bottom: 0">
                  <div class="input-group input-group-merge">
                    <input
                      class="form-control"
                      type="text"
                      placeholder="ຄົ້ນຫາຂໍ້ມູນ..."
                      v-model="searchOrder"
                      v-on:keyup="this.searchOrder_up($event)"
                    />
                    <div class="input-group-append">
                      <span class="input-group-text"
                        ><i class="fas fa-search"></i
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
         
            <!-- Light table -->
            <div class="table-responsive border">
              
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th class="text-center" width="80">ເລກທີ່</th>
                    <th class="text-left table-user-info" >ຂໍ້ມູນລູກຄ້າ</th>
                    <th class="text-right" >ມູນຄ່າສັ່ງຊື້</th>
                    <th class="text-center" width="150" style="min-width: 150px;">ສະຖານະເຄື່ອງ</th>
                    <th class="text-center" width="80" >ການຊຳລ່ະ</th>
                    <th class="text-center" width="100">ວັນທີ່ຮັບອໍເດີ້</th>
                    <th width="80" class="text-center">ຈັດການ</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="loading">
                    <td colspan="6" class="text-center">
    
                          <content-loader viewBox="-10 10 450 110" >
                            <rect x="0" y="0" rx="3" ry="3" width="350" height="5" />
                            <rect x="10" y="20" rx="3" ry="3" width="320" height="5" />
                            <rect x="0" y="40" rx="3" ry="3" width="370" height="5" />
                            <rect x="10" y="60" rx="3" ry="3" width="350" height="5" />
                            <rect x="0" y="80" rx="3" ry="3" width="300" height="5" />
                            <rect x="10" y="100" rx="3" ry="3" width="380" height="5" />
                      </content-loader>
                    </td>
                  </tr>
                  <tr v-for="list in PreOrderAll.data" :key="list.id">
                    <th>{{list.preorder_id}}</th>
                    <th class="table-user">
                      <b v-if="list.customer_id!=0">{{list.customer_sex}} {{list.customer_name}}</b>
                      <b v-else> ລູກຄ້າທົ່ວໄປ ເຂົ້າມາໜ້າຮ້ານ </b>
                      <br>
                      <small v-if="list.customer_id!=0"><i class="ni ni-pin-3"></i>: {{list.customer_address}}</small><br>
                      <small v-if="list.customer_id!=0"><i class="ni ni-mobile-button"></i>: {{list.customer_tel}}</small>
                      
                    </th>
                    
                    <td class="text-right">
                      <span class="text-muted">{{formatPrice(list.amount)}}</span>
                    </td>
                    <td class="text-center">
                     <span v-if="list.transport_status=='pending'" class="text-warning"> <i class="fas fa-truck " ></i> ດຳເນີການ</span>
                     <span v-if="list.transport_status=='imported'" class="text-success"> <i class="fas fa-file-import "></i> ນຳເຂົ້າສຳເລັດ</span>
                    
                    </td>
                    <td class="text-center">
                      <span class=" text-success" v-if="list.pay_status=='payed'"><i class="fas fa-check-circle"></i> ສຳເລັດ</span>
                      <span class=" text-warning" v-if="list.pay_status=='pending'"> <i class="fas fa-exclamation-triangle"></i> ລໍຖ້າ</span>
                    </td>
                    <td class="text-center">{{date(list.created_at)}}</td>
                    <td class="table-actions">
                      <div class="col-auto">
                      <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                        <i class="fas fa-ellipsis-h"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-right" style="">
                        
                        <router-link :to="{ name: 'check-preorder', params: { id: list.preorder_id }, }" class="dropdown-item" v-if="$store.getters['getroles'].includes('preorder_edit')" ><i class="fas fa-dolly-flatbed"></i>ກວດເຊັກເຄື່ອງ</router-link >
                        <a href="javascript:void(0)" @click="Print($event, list.preorder_id)" class="dropdown-item" ><i class="fas fa-print"></i>ພິມໃບຮັບເຄື່ອງ</a >
                        <router-link :to="{ name: 'edit-preorder', params: { id: list.preorder_id }, }" class="dropdown-item" v-if="$store.getters['getroles'].includes('preorder_edit')" ><i class="fas fa-user-edit text-info"></i>ແກ້ໄຂຂໍ້ມູນ</router-link >
                        <a class="dropdown-item" href="javascript:void(0)" @click="Delpreorder(list.preorder_id)" v-if="$store.getters['getroles'].includes('preorder_remove')" ><i class="fas fa-trash text-red"></i>ລຶບຂໍ້ມູນ</a >
                      </div></div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <vuePagination
                :pagination="PreOrderAll"
                @paginate="getPreOrder()"
                :offset="4"
              ></vuePagination>
            </div>
         
        </div>
      </div>
    </div>
    </section>
    <div
      class="modal fade "
      id="check_preorder_dialog"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNew"
      aria-hidden="true"
      data-keyboard="false" data-backdrop="static"
    >
      <div class="modal-dialog modal-lg " role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">ກວດເຊັກເຄື່ອງ ລາຍການສັ່ງຊື້</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <list-loader v-if="loading_check"></list-loader>
             <div class="border-0" v-if="!loading_check">
                  <div class="row">
                    <div class="col-md-4 mb-4">
                      <h3 class=" text-info">ຜູ້ສະໜອງສິນຄ້າ</h3>
                        <div class="col flex justify-center mb-2">
                        <span class="avatar avatar-xl rounded-circle">
                
                          <img
                            alt="Image placeholder"
                            :src="SupplierData.images"
                          />
                        </span>
                      </div>
                      <div class="ml-3">
                        <i class="fas fa-warehouse"></i>: {{SupplierData.name}}<br />
                        <i class="fas fa-mobile-alt"></i>: {{SupplierData.tel}}<br />
                        <i class="fas fa-map-marked-alt"></i>: {{SupplierData.address}}
                      
                      </div>
                    </div>
                    <div class="col-md-4 mb-4">
                      <h3 class=" text-info">ຜູ້ສັ່ງຊື້ສິນຄ້າ</h3>
                      <span v-if="CustomerData.Customer_id==0">
                        <i class="fas fa-user-alt"></i>: ລູກຄ້າທົ່ວໄປ ເຂົ້າມາໜ້າຮ້ານ
                      </span>
                      <span v-if="CustomerData.Customer_id!=0">
                        <i class="fas fa-user-alt" ></i>: {{CustomerData.Customer_name}} <br>
                        <i class="fas fa-mobile-alt" ></i>: {{CustomerData.Customer_tel}} <br>
                        <i class="fas fa-map-marked-alt" ></i>: {{CustomerData.Customer_address}}
                      </span>
                    </div>
                    <div class="col-md-4 mb-4">
                      <h3 class=" text-info">ການຂົນສົ່ງ</h3>
                      ສັ່ງຊື້ເມື່ອ: {{ date(DayOrder) }}<br>
                      ວັນທີ່ຂົນສົ່ງ: <br> {{ dayto(TranDay)}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-md-8 mb-4">
                      <h3 class=" text-info">ລາຍການສັ່ງຊື້</h3>
                      <div class="table-responsive border">
                    <table class="table align-items-center table-flush">
                      <thead class="thead-light">
                        <tr>
                          <!-- <th width="30">ID</th> -->
                          <th class="text-center" width="120">ຮູບ</th>
                          <th class="text-left">ຊື່ລາຍການ</th>
                          <th class="text-center" width="110">ລາຄາຊື້</th>
                          <th class="text-center" width="90">ຈຳນວນ</th>
                          <th class="text-right" width="140">ລວມ</th>
                          <th width="80" class="text-center" >ຈັດການ</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="list in ListPreorder" :key="list.id">
                          <td>
                            <span class="avatar avatar-xl border-radius-lg">
                              <img v-if="list.images" alt="Image placeholder" :src=" localtionURL + '/images/product/' + list.images " />
                              <img v-else alt="Image placeholder" :src="localtionURL + '/images/add_img_bt.png'" />
                            </span>
                          </td>
                          <td>
                            {{ list.name }}<br />
                            <small>{{ list.detail }}</small>
                          </td>
                          <td class="text-right">
                            {{ formatPrice(list.price) }} ກີບ
                          </td> 
                          <td class="text-center" >
                            <i class=" fa-lg fas fa-minus-circle cursor-pointer text-success " v-if="list.product_id" @click="RemoveNumPro(list.product_id)" ></i>
                            {{ list.amount }}
                            <i class=" fa-lg fas fa-plus-circle cursor-pointer text-success " v-if="list.product_id" @click="AddNumPro(list.product_id)" ></i>
                          </td>
                          <td class="text-center" >
                         
                            {{ list.amount }}
                           
                          </td>
                          <td class="text-right">
                            {{ formatPrice(list.amount * list.price) }} ກີບ
                          </td>

                          <td class="table-action text-center">
                            <span v-if="list.product_id" @click="RemovePro(list.product_id)" ><i class="fas fa-trash-alt cursor-pointer text-red" ></i ></span>
                            <div class="col-auto" v-if="!list.product_id">
                              <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                <i class="fas fa-ellipsis-h"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-right" style="" >
                                <a class="dropdown-item" href="javascript:void(0)" @click="EditPre(list.id)" >
                                  <i class="fas fa-user-edit text-info"></i
                                  >ແກ້ໄຂຂໍ້ມູນ
                                </a>
                                <a class="dropdown-item" href="javascript:void(0)" @click="DelPre(list.id)" ><i class="fas fa-trash text-red"></i >ລຶບຂໍ້ມູນ</a >
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                      <thead class="thead-light">
                        <tr>
                          <th class="text-center" width="120"></th>
                          <th class="text-left"></th>
                          <th class="text-center" width="110">ລວມທັງໝົດ</th>
                          <th class="text-center" width="90"></th>
                          <th class="text-right" colspan="2" width="110">
                            {{ formatPrice(AmountPreorder) }} ກີບ
                          </th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                    </div>
                    <div class="col-md-4 mb-4">
                      <h3 class=" text-info">ຄ່າຂົນສົ່ງ</h3>
                    </div>
                  </div>
                <!-- <bailllist
                :ListBilldata="ListBilldata" :ViewType="true"
                ></bailllist> -->
              </div>
            
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              ປິດ
            </button>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
import moment from 'moment';
export default {
    name: "order",

    components: {},

    directives: {},

    data() {
        return {
          Repaires:[],
          isLoggedIn: false,
          PreOrderAll:[],
          searchOrder:'',
          loading:false,
          loading_check: false,
          CustomerData: {
            Size: "S",
            CustomerSe: "",
            Customer_id: "",
            Customer_name: "",
            Customer_tel: "",
            Customer_address: "",
          },
          PayStatus:'',
          ListPreorder:[],
          SupplierData: {
            name: "",
            tel: "",
            address: "",
            images: "",
          },
          tranData: {
            ListTran: [],
          },
          TranDay:'',
          supplierBack:'',
          DayOrder:'',
        };
    },

    mounted() {},

    methods: {
      dayto(day){
        if(day!=''){
          let day_start = day.split(' ');
         return this.date(day_start[0])+' - '+this.date(day_start[2])
        }
        
      },
      check_preorder(id){
        //console.log(id);
        this.$Progress.start();
          $('#check_preorder_dialog').modal('show');
          this.loading_check = true;
          this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios.get(`/api/preorder/edit/${id}`)
          .then((response) => {
            if (response.data.success) {
              this.ListPreorder = response.data.pre_list_data;
              this.tranData.ListTran = JSON.parse(
                response.data.preorder_data[0].tran_price
              );
              this.TranDay = response.data.preorder_data[0].transport_day; 
              this.DayOrder = response.data.preorder_data[0].created_at; 
              this.supplierBack = response.data.preorder_data[0].supplier_id;
              this.SupplierData.name = response.data.preorder_data[0].sup_name;
              this.SupplierData.tel = response.data.preorder_data[0].sup_tel;
              this.SupplierData.address = response.data.preorder_data[0].sup_address;
              this.SupplierData.images = window.location.origin+'/images/avatars/'+response.data.preorder_data[0].sup_images;

              this.CustomerData.CustomerSe =
                response.data.preorder_data[0].customer_type;
              this.CustomerData.Customer_id =
                response.data.preorder_data[0].customer_id;
              this.CustomerData.Customer_name =
                response.data.preorder_data[0].customer_name;
              this.CustomerData.Customer_tel =
                response.data.preorder_data[0].customer_tel;
              this.CustomerData.Customer_address =
                response.data.preorder_data[0].customer_address;
              if (response.data.preorder_data[0].pay_status == "payed") {
                this.PayStatus = true;
              } else {
                this.PayStatus = false;
              }
              //console.log(response.data.preorder_data[0]);
              this.loading_check = false;
              this.$Progress.finish();
            } else {
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
            }
          })
          .catch((error) => {
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            this.$Progress.fail();
          });
      });
      },
      Delpreorder(id){
            this.$swal.fire({
            title: 'ທ່ານແນ່ໃຈບໍ່?',
            text: "ທີ່ຈະລຶບຂໍ້ມູນນີ້!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'ລຶບເລີຍ!',
            cancelButtonText: 'ຍົກເລີກ'
            }).then((result) => {
            if (result.isConfirmed) {

                this.$Progress.start()
                this.$axios.get('/sanctum/csrf-cookie').then(response => {
                    this.$axios.delete(`/api/preorder/delete/${id}`)
                        .then(response => {
                             this.getPreOrder()
                            if (response.data.success) {
                              this.$Progress.finish()
                              this.$notify({ group: "sucess", title: "ສຳເລັດ!", text: " ຂໍ້ມູນໄດ້ຖຶກລຶບອອກແລ້ວ! " }, 2000)
                            } else {
                              this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+response.data.message }, 4000)
                              this.$Progress.fail()
                            }
                        })
                        .catch( (error)=> {
                           this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
                           // console.error(error)
                            this.$Progress.fail()
                        });
                })
            }
            })
      },
      searchOrder_up(e){
            if(!this.searchOrder){
                this.doSearch()
           }
         if (e.which === 13) {
            this.doSearch()
            }
      },
      doSearch(){
          this.loading = true
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
                axios.get(`/api/preorder?page=1&s=${this.searchOrder}`)
                    .then((response) => {
                            this.PreOrderAll = response.data.AllPreorder;
                            this.$Progress.finish()
                            this.loading = false
                    })
                    .catch(() => {
                        console.error(error)
                        this.$Progress.fail()
                    })
                })
        },
      date(value) {
      return moment(value).format("DD/MM/YYYY");
    },
      formatPrice(value) {
            let val = (value / 1).toFixed(0).replace(".", ",");
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
      getPreOrder(bpage) {
      this.loading = true
      this.$Progress.start();
      if (typeof bpage == "undefined") {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.get(`/api/preorder?page=${this.PreOrderAll.current_page}&s=${this.searchOrder}`).then((response) => {
              this.loading = false
              if (response.data.AllPreorder.data.length < 1) {
                const bp = this.PreOrderAll.current_page - 1;
                if (bp >= 1) {
                  this.getPreOrder(bp);
                } else {
                  this.PreOrderAll = response.data.AllPreorder;
                  this.$Progress.finish();
                }
              } else {
                this.PreOrderAll = response.data.AllPreorder;
                this.$Progress.finish();
              }
            })
            .catch((error) => {
              this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
              this.$Progress.fail();
            });
        });
      } else {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .get(`/api/preorder?page=${bpage}`)
            .then((response) => {
              this.PreOrderAll = response.data.AllPreorder;
              this.$Progress.finish();
            })
            .catch((error) => {
              this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
              this.$Progress.fail();
            });
        });
      }
    },
    },
    created(){
        this.$axios.get(`/api/users/checkauth`).then((response) => { if (!response.data.isLogin) { window.location.href = "/"; } })

        if(window.Laravel.isLoggedin){
           this.isLoggedIn = true
        }
        this.getPreOrder();
    }
};
</script>

<style lang="scss" scoped></style>
