<template  >
<div class="container-fluid">
<div class="header pb-6" v-if="isLoggedIn">
      <div class="">
        <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>
                </ol>
              </nav>
            </div>
          
          </div>
        </div>
      </div>
    </div>

    <div class=" mt--6" v-if="isLoggedIn">
      <div class="row">

          <carddash/>
      </div>
      <div class="row" > 
        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              ເງິນສົດ ແລະ ເງິນໃນບັນຊີ
            </div>
            <div class="card-body">
              <piechart/>
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">
            ສະຫຼຸບເຄື່ອນໄຫວ
            <!-- <div class="row d-flex justify-content-between px-3">
            <h4 class="h3 mb-0">ລາຍຮັບ-ລາຍຈ່າຍ/ກຳໄລ</h4>
            <h4 class="h3 mb-0">ຫົວໜ່ວຍ: ລ້ານກີບ</h4>
            </div> -->
          </div>
            <div class="card-body">
              <chartline  />
            </div>
          </div>
        </div>
        
        <div class="col-md-8">
          <div class="card">
            <div class="card-header ">
            ສະຫຼຸບເຄື່ອນໄຫວ ຍອດບໍລິການ
          </div>
            <div class="card-body">
              <chartbar />
              
            </div>
          </div>
        </div>
        <div class="col-md-4">
          
              <dashcap/>
              
        </div>
        
      </div>
      <div class="row">
        <div class="col-xl-6">
          <div class="card">
            <div class="card-header border-0">
              <div class="row d-flex justify-content-between px-2">
                <div >
                  ເຄືື່ອນໄຫວທຸລະກຳລ່າສຸດ
                </div>
                <div >
                  <a href="javascript:void(0)" @click="loadNewData" class="btn btn-sm btn-neutral"><span v-html="iconRe"></span> ອັບເດດ</a>
                </div>

              </div>

            </div>
            <div class="table-responsive scrollbar scrollbar-custom" style="height: 400px;">
          <table class="table align-items-center table-flush table-hover ">
            <thead class="thead-light">
              <tr>
                <th class="text-center" width="86">ວັນທີ່</th>
                <th width="120">ເລກທີ່ທຸລະກຳ</th>
                <th class="table-user-info">ເນື້ອໃນ</th>
                <th class="text-center" width="110">ລາຍຮັບ</th>
                <th class="text-center" width="110">ລາຍຈ່າຍ</th>
              </tr>
            </thead>
            <tr v-if="loadinAcc">
                    <td colspan="5" 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>
            <tbody v-if="!loadinAcc"> 
              <tr  v-for="trn in AllTRNData" :key="trn.id">
                <td>{{date(trn.created_at)}}</td>
                <td>{{trn.trn_id}}</td>
                <td>{{trn.acc_trn_detail}}</td>
                <td v-if="trn.trn_type=='income'" class="text-right">{{formatPrice(trn.sum)}}</td>
                <td v-else class="text-right"> - </td>
                <td v-if="trn.trn_type=='expense'" class="text-right">{{formatPrice(trn.sum)}}</td>
                <td v-else-if="trn.trn_type == 'capital' && trn.cr!='401' " class="text-right" >
                          {{ formatPrice(trn.sum) }}
                        </td>
                <td v-else class="text-right"> - </td>
              </tr>
            </tbody>
          </table>
          <vuePagination
              :pagination="AllTRN"
              @paginate="GetAllTRN()"
              :offset="4"
            ></vuePagination>
           </div>

          </div>
        </div>
        <div class="col-xl-6">
          <!-- Vector map -->
          <!--* Card header *-->
          <!--* Card body *-->
          <!--* Card init *-->
          <div class="card widget-calendar">
            <!-- Card header -->
            <div class="card-header">
              <div class="row d-flex justify-content-between px-2">
                <div >
                  <h3 class="mb-0">ລາຍການ ສ້ອມແປງທີ່ຍັງຄ້າງ</h3>
                </div>
                <div >
                  <a href="javascript:void(0)" @click="loadNewDataNos" class="btn btn-sm btn-neutral"><span v-html="iconRn"></span> ອັບເດດ</a>
                </div>

              </div>
            </div>
            <!-- Card body -->
            <div class="table-responsive scrollbar scrollbar-custom" style="height: 400px;">
          <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 width="80" class="text-center">ຈັດການ</th>
                  </tr>
                </thead>
                <tr v-if="loadinRn">
                    <td colspan="4" 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>
                <tbody v-if="!loadinRn">

                  <tr v-for="repaire in AllReN.data" :key="repaire.id">
                    <th>{{ repaire.renum_id }}</th>
                    <th class="table-user text-left">
                      <b>{{repaire.customer_sex}} {{repaire.customer_name}}</b><br>
                      <small><i class="ni ni-pin-3"></i>: {{repaire.customer_address}}</small><br>
                      <small><i class="ni ni-mobile-button"></i>: {{repaire.customer_tel}}</small><br>
                      <small>ວັນທີ່ຮັບເຄື່ອງ: {{date(repaire.created_at)}}</small>

                    </th>

                    <td class="text-right">
                      <span class="text-muted">{{formatPrice(repaire.all_price)}}</span>
                    </td>
                    <td class="text-center">
                      <span v-for="st in ListStatus" :key="st.index">
                            <span class="status" v-if="repaire.status_now === st.id"> <span v-html="st.icon"></span> {{ st.data }}</span>
                      </span>
                    </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="">
                        <a href="javascript:void(0)" @click="Print($event, repaire.renum_id)" class="dropdown-item" > <i class="fas fa-print"></i> ພິມໃບຮັບເຄື່ອງ</a >
                        <router-link  v-if="$store.getters['getroles'].includes('repaire_edit')" :to="{ name: 'edit-repaire', params: { id: repaire.renum_id }, }" class="dropdown-item" > <i class="fas fa-user-edit text-info"></i>ແກ້ໄຂຂໍ້ມູນ - ເບີ່ງ</router-link >
                        <a v-if="$store.getters['getroles'].includes('repaire_remove')" class="dropdown-item" href="javascript:void(0)" @click="Delrepaire(repaire.renum_id)" ><i class="fas fa-trash text-red"></i>ລຶບຂໍ້ມູນ</a >
                      </div></div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <vuePagination
              :pagination="AllReN"
              @paginate="GetAllReNot()"
              :offset="4"
            ></vuePagination>
           </div>
          </div>
        </div>
        <div class="col-xl-6">
          <lastsellpro/>
        </div>
      </div>


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

<script>
import piechart from '../components/Dashboard_chart/pie_revenue_chart.vue';
import chartline from '../components/Dashboard_chart/in_ex_chart.vue';
import dashcap from '../components/Dash_Cap.vue';
import chartbar from '../components/ChartBar.vue';
import moment from 'moment';

export default {
    name: "Dashboard",
    watch:{
      'loadinAcc'(){
        if(this.loadinAcc){
          this.iconRe = '<i class="fas fa-sync-alt fa-spin text-danger"></i>'
        } else {
          this.iconRe = '<i class="fas fa-check text-success"></i>'
          this.polling = setInterval(() => {
                this.iconRe = '<i class="fas fa-sync-alt"></i>'
                clearInterval(this.polling);
            }, 900);
         }
      },
      'loadinRn'(){
        if(this.loadinRn){
          this.iconRn = '<i class="fas fa-sync-alt fa-spin text-danger"></i>'
        } else {
          this.iconRn = '<i class="fas fa-check text-success"></i>'

          this.pollingg = setInterval(() => {
                this.iconRn = '<i class="fas fa-sync-alt"></i>'
                clearInterval(this.pollingg);
            }, 900);
         }
      },
      '$store.state.store.Sataus'(){
        this.allSes =  this.$store.getters["getallsession"]
        this.Session = this.$store.getters["getsession"]
      }
    },
    components: {chartline,chartbar,moment,dashcap,piechart},
    data() {
        return {
            name: null,
            allSes:[],
            Session:[],
            AllTRN:[],
            AllReN:[],
            loadinAcc:false,
            loadinRn:false,
            iconRe:'<i class="fas fa-sync-alt"></i>',
            iconRn:'<i class="fas fa-sync-alt"></i>',
            polling: null,
            pollingg: null,
            currentSort:'id',  // sort table
            currentSortDir:'desc',      // sort type
          ListStatus:[
            {id:"a1",data:"ຮັບເຄື່ອງແລ້ວ",icon:'<span class="badge badge-dot mr-1"><i class="bg-success"></i></span>'},
            {id:"a2",data:"ກຳລັງກວດເຊັກ",icon:'<span class="badge badge-dot mr-1"><i class="bg-info"></i></span>'},
            {id:"a3",data:"ແຈ້ງລາຄາສ້ອມແປງໃຫ້ລູກຄ້າ",icon:'<span class="badge badge-dot mr-1"><i class="bg-primary"></i></span>'},
            {id:"a4",data:"ລູກຄ້າຍືນຍັງສ້ອມແປງ",icon:'<span class="badge badge-dot mr-1"><i class="bg-success"></i></span>'},
            {id:"a5",data:"ກຳລັງສັ່ງອາໄຫລ໋ ສ້ອມແປງ",icon:'<span class="badge badge-dot mr-1"><i class="bg-warning"></i></span>'},
            {id:"a6",data:"ກຳລັງສັ້ອມແປງ",icon:'<span class="badge badge-dot mr-1"><i class="bg-warning"></i></span>'},
            {id:"a7",data:"ສ້ອມແປງສຳເລັດ",icon:'<span class="badge badge-dot mr-1"><i class="bg-success"></i></span>'},
            {id:"a8",data:"ສົ່ງຄືນບໍ່ສ້ອມແປງ",icon:'<span class="badge badge-dot mr-1"><i class="bg-warning"></i></span>'},
            {id:"a9",data:"ບໍ່ສາມາດສ້ອມແປງໄດ້",icon:'<span class="badge badge-dot mr-1"><i class="bg-warning"></i></span>'},
          ],
          isLoggedIn: false,
        }
    },
    computed:{
       AllTRNData() {
     if(this.AllTRN.data!=null){
      return this.AllTRN.data.sort((a,b) => {
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;
        if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
        if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
        return 0;
      })
      }
    },
    },
    methods: { 
      Print(e,id){
      window.open(window.location.origin+'/api/rece/'+id, "_blank");
    },
      sort(s) {
     // console.log(s)
      if(s === this.currentSort) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
      }
      this.currentSort = s;
    },
      loadNewData(){
         // this.spin = 'fa-spin'
           this.GetAllTRN()
      },
      loadNewDataNos(){
        this.GetAllReNot()
      },
      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, ",")
    },
      GetAllTRN(bpage){
        this.loadinAcc = true
            this.$Progress.start();
           if (typeof bpage == "undefined") {
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .get(`/api/acctrn?page=${this.AllTRN.current_page}`)
                .then((response) => {
                  this.loadinAcc = false
                  if (response.data.data.length < 1) {
                    let bp = this.AllTRN.current_page - 1;
                    if (bp >= 1) {
                      this.GetAllTRN(bp);
                    } else {
                      this.AllTRN = response.data;
                    }
                  } else {

                    this.AllTRN = response.data;
                    this.$Progress.finish();
                  }
                })
                .catch(() => {
                  this.AllTRN = '';
                  console.error(error);
                  this.$Progress.fail();

                });
            });
          } else {
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .get(`/api/acctrn?page=${bpage}`)
                .then((response) => {
                  this.AllTRN = response.data;
                  this.$Progress.finish();
                })
                .catch(() => {
                  console.error(error);
                  this.$Progress.fail();
                });
            });
          }
      },
      GetAllReNot(bpage){
        this.loadinRn = true
            this.$Progress.start();
           if (typeof bpage == "undefined") {
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .get(`/api/dashboard/re_nosess?page=${this.AllReN.current_page}`)
                .then((response) => {
                  this.loadinRn = false
                  if (response.data.data.length < 1) {
                    let bp = this.AllReN.current_page - 1;
                    if (bp >= 1) {
                      this.GetAllReNot(bp);
                    } else {
                      this.AllReN = response.data;
                    }
                  } else {

                    this.AllReN = response.data;
                    this.$Progress.finish();
                  }
                })
                .catch(() => {
                  this.AllReN = '';
                  console.error(error);
                  this.$Progress.fail();

                });
            });
          } else {
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .get(`/api/dashboard/re_nosess?page=${bpage}`)
                .then((response) => {
                  this.AllReN = response.data;
                  this.$Progress.finish();
                })
                .catch(() => {
                  console.error(error);
                  this.$Progress.fail();
                });
            });
          }
      },
       GetAllSes() {
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/setting`)
          .then((response) => {
              this.$store.dispatch({
                type:"setSession",
                session: response.data.que,
                allsession: response.data.all_que,
              })
             this.$Progress.finish();
          })
          .catch((error) => {
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            this.$Progress.fail();
          });
      });
    }
    },
    created() {
        if (window.Laravel.user) {
            this.name = window.Laravel.user.name
        }

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

        this.GetAllTRN()
        this.GetAllReNot()

       if(!this.$store.getters["getallsession"]){
         this.$store.dispatch({ type:"reSetSession" })
        }


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

}
</script>
