<template>
<div>
  <ul class="nav navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ locales[locale] }}
      </a>
      <div class="dropdown-menu">
        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
          @click.prevent="setLocale(key)">
          {{ value }}
        </a>
      </div>
    </li>
    <ul class="navbar-nav mr-auto">
    <li v-if="(user && role == 'admin')" class="nav-item">
      <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
          <div align="center">
            <p>Today's Rate</p>
            <p>X1 : Cash: {{x1_cash}} Cheque: {{x1_cheque}} BA: {{x1_ba}}</p>
            <p>X2 : Cash: {{x2_cash}} Cheque: {{x2_cheque}} BA: {{x2_ba}}</p>
          </div>
          <div style="text-align: center; margin: 0">
            <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
          </div>
          <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
        </el-popover>
      </li></ul>
      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li>
      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">{{ $t('Transaction History') }}</router-link></li>
      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li>
   
  </ul>

<!-- update rate dialog -->
  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible">
    <el-form :inline="true" align="center">
        <el-form-item>X1 : 
            Cash : <el-input style=width:10% ></el-input>
            Cheque : <el-input style=width:10%></el-input>
            BA : <el-input style=width:10%></el-input>
        </el-form-item>
    </el-form>
    <el-form :inline="true" align="center">
        <el-form-item>X2 : 
            Cash : <el-input style=width:10% ></el-input>
            Cheque : <el-input style=width:10%></el-input>
            BA : <el-input style=width:10%></el-input>
        </el-form-item>
    </el-form>
    <div align="center">
        <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true">Save</el-button>
    </div>
  </el-dialog>
<!-- update rate dialog end -->
<!-- update rate dialog done -->
  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
    <span>Rate Successfully Updated</span><br><br>
    <div align="center">
        <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
    </div>
  </el-dialog>
<!-- update rate dialog done end -->
 </div> 
</template>

<script>
import { mapGetters } from 'vuex'
import { loadMessages } from '~/plugins/i18n'

export default {
  data() {
    return {
        UpdateRatePopoverVisible: false,
        UpdateRateDialogVisible: false,
        DoneUpdateRateDialogVisible: false,
        x1_cash: '1.56',
        x1_cheque: '1.63',
        x1_ba: '1.66',
        x2_cash: '1.61',
        x2_cheque: '1.70',
        x2_ba: '1.72',
      };
  },
  computed: mapGetters({
    locale: 'lang/locale',
    locales: 'lang/locales',
    user: 'auth/user',
    role: 'auth/role'
  }),

  methods: {
    setLocale (locale) {
      if (this.$i18n.locale !== locale) {
        loadMessages(locale)

        this.$store.dispatch('lang/setLocale', { locale })
      }
    }
  }
}
</script>
