<template>
<div>
  <div align="right">
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button>
</div>

  <!-- Booking Table -->

<el-tabs type="border-card" class="table-switch">
  <el-tab-pane label="Booking Table">
  <el-row :gutter="20">
    <div>
      <el-table :data="bookingTable" :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column label="Ref No." width="100" >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
        </el-table-column>
        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
        <el-table-column label="Marking" width="120" prop="marking" />
        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
        <el-table-column label="Rate" width="74" prop="rate" />
        <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
                         prop="transfer_amount" width="180" sortable/>
        <!-- <el-table-column label="ETA" sortable width="100"/> -->
        <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
        </el-table-column> -->
         <el-table-column :filters="[{text: '1', value: 1}, {text: '2', value: 2}, {text: '3', value: 3}, {text: '4', value: 4}, {text: '5', value: 5}, {text: '6', value: 6}]" :filter-method="filterHandlerStatus" prop="status" label="Status">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <p>{{ scope.row.status_desc }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
        <el-table-column label="" width="180">
          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
          <!-- <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
            </template> -->
          </el-table-column>
        </el-table>
        <div align="right">
      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
        Previous
      </el-button>
      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
        Next
      </el-button>
    </div>
      </div>
    </el-row><br><br></el-tab-pane>

  <el-tab-pane label="Completed">
  <el-row :gutter="20">
      <div>
        <el-table :data="bookingTableComplete">
          <el-table-column label="Ref No." width="100" >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
          </el-table-column>
          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
          <el-table-column label="Marking" width="120" prop="marking" />
          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/> -->
          <el-table-column label="Rate" width="74" prop="rate" />
          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
                           prop="transfer_amount" width="180" sortable/>
          <!-- <el-table-column label="ETA" sortable width="100"/> -->
          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
        </el-table-column> -->
          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
          <el-table-column label="Status" width="106" prop="status_desc">
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top">
                <p>{{ scope.row.status_desc }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
          <!-- <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus"
                           label="" width="180" filter-placement="bottom-end">
            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button> -->
            <el-table-column label="" width="180">
          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
            <!-- <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
            </template> -->
          </el-table-column>
        </el-table>
        <div align="right">
      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.prev_page_url">
        Previous
      </el-button>
      <span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
        Next
      </el-button>
    </div>
      </div>
    </el-row><br><br>
  </el-tab-pane>
</el-tabs>





    <!-- Booking Table-end -->
  </div>
</template>
<style type="text/css">
  .el-table__column-filter-trigger i {
    font-size: 18px;
    font-weight: 900;
    vertical-align: sub;
  }
</style>
<script>
import axios from 'axios'

export default {
  middleware: 'admin',
  data () {
    return {
      status: null,
      bookingTable: [],
      bookingTableComplete: [],
      url: 'api/admin/booking',
      completeBookingurl : "api/admin-complete-booking",
      pagination: [],
      completePagination: [],

      loading_btn: false,
    }
  },
  mounted () {
    this.getBooking();
    this.getBookingTableComplete();
  },
  methods: {
    getBooking(){
      let $this = this
      axios.get("/"+this.url+"/"+ this.$route.params.userId).then(response => {
        this.bookingTable = response.data.data;
        $this.makePagination(response.data);
      })
    },
    getBookingTableComplete(){
      let $this = this
      axios.get("/"+this.completeBookingurl + "/" + this.$route.params.userId).then(response => {
        this.bookingTableComplete = response.data.data
        $this.makeCompletePagination(response.data)
      })
    },
    RefreshBooking() {
      let $this = this
      this.loading_btn = true
      axios.get(this.url).then(response => {
        this.loading_btn = false;
        this.bookingTable = response.data.data
        this.$message({
          showClose: true,
          message: 'Booking is updated',
          type: 'success',
          duration: 5000
        })
      })
    },
    RefreshBookingTableComplete() {
      let $this = this
      this.loading_btn = true
      axios.get(this.completeBookingurl).then(response => {
        this.loading_btn = false;
        this.bookingTableComplete = response.data.data
      })
    },
    makePagination(data){
      let pagination ={
        current_page: data.current_page,
        last_page: data.last_page,
        next_page_url: data.next_page_url,
        prev_page_url: data.prev_page_url
      }
      this.pagination = pagination
    },
     makeCompletePagination(data){
      let pagination ={
        current_page: data.current_page,
        last_page: data.last_page,
        next_page_url: data.next_page_url,
        prev_page_url: data.prev_page_url
      }
      this.completePagination = pagination
    },
    fetchPaginateBooking(url) {
      this.url = url
      this.getBooking()

    },
    fetchCompletePaginateBooking(url) {
      this.completeBookingurl = url
      this.getBookingTableComplete()
     },
    filterHandlerStatus (value, row, column) {
      const status = row.admin_status;
      return value === status;
      // if(value ==="Success")
      //   return status === "(5/5)" || status === "(7/7)";
      // else
      //   return !(status === "(5/5)" || status === "(7/7)");
    },
    filterHandlerTranferAmount (value, row, column) {
      // Pending...lol
      return false;
    },
    filterHandlerTerm(value, row, column){
      const term = row.term;
      return value.toLowerCase() === term.substring(0,2);
    },
    BookingStatus (status, booking_id, term) {
      // TODO : Get booking status from server
      this.status = status
      switch (this.status) {
        case 1:
          this.$router.push({
            name: 'booking.admin.booking.detail',
            params: {id: booking_id }
          })
          break
        case 2:
          this.$router.push({
            name: 'booking.admin.verification',
            params: {id: booking_id }
          })
          break
        case 3:
          this.$router.push({
            name: 'booking.admin.supplier',
            params: {id: booking_id }
          })
          break
        case 4:
          this.$router.push({
            name: 'booking.admin.supplier.report',
            params: {id: booking_id }
          })
          break
        case 5:
          this.$router.push({
            name: 'booking.admin.cnslip',
            params: {id: booking_id }
          })
          break

        case 6:
          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
            this.$router.push({
              name: 'booking.admin.x2complete',
              params: {id: booking_id }
            })
            break
          }
          this.$router.push({
            name: 'booking.admin.invoice',
            params: {id: booking_id }
          })
          break

        case 7:
          this.$router.push({
            name: 'booking.admin.complete',
            params: {id: booking_id }
          })
          break
        default:
          break
      }
    }
  }

}
</script>
