<template>
  <el-main>
    <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
    <progress-track v-else v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
      <br>
      <h5> Verify User Bankslip </h5>
      <br>
      <h5> ( Scroll down to view the customer bankslip ) </h5>
      <br>
      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
    </div>
    <br>
    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">

              <div class="el-table__body-wrapper is-scrolling-none">
                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                  <colgroup>
                    <col name="el-table_2_column_9" width="210">
                    <col name="el-table_2_column_10" width="210">
                  </colgroup>
                  <tbody>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Ref No :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.id }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Date :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.created_at }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Customer Marking :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.marking }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Term :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.term }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Beneficiary Account : </div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{booking_details.account_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Beneficiary Account Number : </div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{booking_details.account_num}}</div>
                      </td>
                    </tr>
                    <!---->
                  </tbody>
                </table>
                <!---->
                <!---->
              </div>
              <!---->
              <!---->
              <!---->
              <!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </div>
          </div>
          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
              <div class="hidden-columns">
                <div></div>
                <div></div>
              </div>
              <!---->
              <div class="el-table__body-wrapper is-scrolling-none">
                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                  <colgroup>
                    <col name="el-table_3_column_11" width="200">
                    <col name="el-table_3_column_12" width="200">
                  </colgroup>
                  <tbody>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">CNY/RMB :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">CNY {{ booking_details.amount }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">+ Service Charge :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">/ RATE :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">{{ booking_details.rate }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">MYR {{ booking_details.bia }}</div>
                      </td>
                    </tr>
                    <!-- <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">+ GST 6% :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">MYR 4,430.88</div>
                      </td>
                    </tr> -->
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">
                          <b>MYR {{ booking_details.bia }}</b>
                        </div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <!---->
                  </tbody>
                </table>
                <!---->
                <!---->
              </div>
              <!---->
              <!---->
              <!---->
              <!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </div>
          </div>
        </div>
        <!-- <el-row :gutter="12">
          <el-col :span="12">
            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
        </el-row> -->
      </el-card>
    </el-row>
    <br>

    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>BankinSlip</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
              <p v-else>Download</p>
            </a>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
            <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
      <span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="Please input the reason"
          v-model="reject_reason">
        </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">Cancel</el-button>
        <el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
      </span>
    </el-dialog>


  </el-main>
</template>
<style>
  .booking-details {
    font-weight: bold;
  }
  .image {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    display: block;
  }
  .image:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  }
</style>
<script>
  import ProgressTrack from '~/components/AdminProgressTrack'
  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
  import axios from 'axios'

  export default {
    components: {
      'progress-track': ProgressTrack,
      'x2-progress-track': X2ProgressTrack
    },
    data() {
      return {
        trackerConfig :{
          status: 2,
          term: null
        },
        loading_btn: false,
        rejectDialogVisible: false,
        reject_reason: null,
        booking_details: {
          id: null,
          amount: null,
          bia: null,
          user_bankslip_path: null,
        },
        estimated_arrival_time: null,
      }
    },
    beforeCreate() {
      const loading = this.$loading({
        lock: true,
        text: 'Please wait..',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      axios
        .get('/api/admin/booking/' + this.$route.params.id + '/details')
        .then((response) => {
          this.booking_details = response.data;
          this.trackerConfig.term = response.data.term;
          loading.close()
        }).catch((error) => {
          console.log(error)
          loading.close()
          this.$router.push({
            name: 'notfound'
          })
        })
    },
    methods: {
      approveUserSlip() {
        this.loading_btn = true

        // TODO : this no longer used
        let newApprove = {
          estimated_arrival_time: this.estimated_arrival_time
        }

        axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
          .then((response) => {
            this.loading_btn = false

            this.$message({
              showClose: true,
              message: 'User bankinslip accepted. Proceed with book with supplier.',
              type: 'success',
              duration: 5000
            })

            this.$router.push({
              name: this.booking_details.term === 'x1_ba' || this.booking_details.term === 'x2_cheque' ? 'booking.admin.cnslip' : 'booking.admin.supplier'
            })

            // pass variable to another router
          })
          .catch((error) => {
            this.loading_btn = false
            console.log(error)
          })
      },
      rejectUserSlip() {
        this.loading_btn = true
        this.centerDialogVisible = false

        let newApprove = {
          // TODO : this no longer used 
          estimated_arrival_time: this.estimated_arrival_time,
          reject_reason: this.reject_reason
        }

        axios.post('/api/booking/' + this.$route.params.id + '/reject-bank-slip', newApprove)
          .then((response) => {
            this.loading_btn = false

            this.$message({
              showClose: true,
              message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
              type: 'warning',
              duration: 5000
            })

            this.$router.push({
              name: 'admin.home'
            })

            // pass variable to another router
          })
          .catch((error) => {
            this.loading_btn = false
            console.log(error)
          })
      },
      getExtension(path){
        return path.slice(-3);
      },
      isImage(path){
        var ext = this.getExtension(path);
        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
      },
      getURL(path){
        var getUrl = window.location;
        var baseUrl = getUrl.protocol + "//" + getUrl.host;
        return baseUrl + path;
      }
    }
  }
</script>