<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> Supplier Booking </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>Supplier Form</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <el-row :gutter="12" style="text-align:center">
          <el-col :span="20" style="text-align:center">

            <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
              <div align="center">
                <el-form-item prop="supplier">
                  <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
                    <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="rate">
                  <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
                </el-form-item>
                <el-form-item prop="rebate">
                  <el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
                </el-form-item>
                <!-- <el-form-item prop="transfer_amount">
                  <el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Payment Amount" style="width: 80%" />
                </el-form-item> -->
                <el-form-item>
                  <el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
                </el-form-item>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </el-main>
</template>
<style>
  .booking-details {
    font-weight: bold;
  }
</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: 3,
          term: null
        },
        loading_btn: false,
        booking_details: {
          id: null,
          amount: null,
          bia: null,
          user_bankslip_path: null,
        },
        supplier: null,
        supplier_options: null,
        supplierBookingForm: {
          supplier: null,
          rebate: null,
          rate: null,
          transfer_amount: null,
        },
        value: '',
        rules: {
          supplier: [{
            required: true,
            message: 'Please select a supplier',
            trigger: 'change'
          }],
          rebate: [{
            required: true,
            message: 'Please input rebate amount',
            trigger: 'change'
          }],
          rate: [{
            required: true,
            message: 'Please input rate',
            trigger: 'change'
          }],
          transfer_amount: [{
            required: true,
            message: 'Please input payment amount',
            trigger: 'change'
          }]
        },
      }
    },
    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;
        }).catch((error) => {
          console.log(error)
          this.$router.push({
            name: 'notfound'
          })
        })

      axios
        .get('/api/setting-supplier/')
        .then((response) => {
          loading.close()
          this.supplier_options = response.data
        }).catch((error) => {
          loading.close()
          console.log(error)
          this.$router.push({
            name: 'notfound'
          })
        })

    },
    methods: {
      generateReport(formName) {
        this.loading_btn = true

        this.$refs[formName].validate((valid) => {
          if (valid) {
            let newReport = {
              booking_id: this.$route.params.id,
              supplier_id: this.supplierBookingForm.supplier,
              rebate: this.supplierBookingForm.rebate,
              rate: this.supplierBookingForm.rate,
              //transfer_amount: this.supplierBookingForm.transfer_amount,
            }

            axios.post('/api/supplier-booking', newReport)
            .then((response) => {
              this.loading_btn = false
              
              this.$router.push({
                name: 'booking.admin.supplier.report',
                params: {id: this.$route.params.id }
              })
              // redirect to supplier report 

            })
            .catch((error) => {
              this.loading_btn = false
              console.log(error)

              // TODO : Show error message 
            })

          } else {
            this.loading_btn = false
            this.$message({
                  showClose: true,
                  message: 'Please fill the supplier form',
                  type: 'error',
                  duration: 10000
                })
          }
        })

      },
    }
  }
</script>