<?php $__env->startSection('content'); ?>
<div class="page-wrapper" id="app">
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-12 d-flex no-block align-items-center">
        <h4 class="page-title"><?php echo e(__('message.exchange money')); ?></h4>
        <div class="ms-auto text-end">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="<?php echo e(route('exchange-money.create')); ?>" class="btn btn-primary btn-sm">
                  <i class="fa fa-plus"></i> 
                  <?php echo e(__('message.add new')); ?>

                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" style="padding-top: 0px;">
    <div class="card">
      <div class="card-body form wizard-content">
        <form  method="POST" action="<?php echo e(route('exchange-money.store')); ?>" class="mt-5" enctype="multipart/form-data">
          <?php echo e(csrf_field()); ?>

          <input type="hidden" v-model="datas.money_exchange_list_id" name="money_exchange_list_id">
            <section>
              <div class="row" style="margin-top:20px;">
                <div class="col-sm-4">
                  <label class="col-xs-12 col-sm-12 form-custom" style="text-align: right;padding-top:15px;">
                    <?php echo e(__('message.received money')); ?>

                  </label>
                </div>
                <div class="col-sm-4">                  
                  <div class="input-group" style="background-color:#7f8cae !important">
                    <input type="number" class="form-control custom-form-control" required name="received_amount" v-model="datas.received_amount" step="0.01" min="0">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.exchange_from_name}}
                    </span>
                  </div>
                </div>
                <div class="col-sm-4">
                </div>
              </div>
              <div class="row" style="background-color: #919ec0;padding:20px 10px;">
                <div class="col-sm-4">
                  <label class="col-xs-12 col-sm-12 form-custom" style="text-align: center;">
                    <?php echo e(__('message.exchange from')); ?>

                  </label>
                  <div class="input-group" style="background-color:#7f8cae !important">
                    <input type="number" class="form-control custom-form-control" name="exchange_from_amount" v-model="datas.exchange_from_amount" step="0.01" @change="changeData('exchange_from_amount')" min="0" required> 
                    <select class="btn btn-outline-secondary dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true" name="exchange_from_id" v-model="datas.exchange_from_id" ref="exchange_from_id">
                      <?php $__currentLoopData = $currencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index =>$currency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($currency->id); ?>" class="exchange_from_id_<?php echo e($currency->id); ?>"  flage="/<?php echo e($currency->flage); ?>" sample_money="/<?php echo e($currency->sample_money); ?>">
                          <?php echo e($currency->name); ?></option>
                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                  </div>
                </div>
                <div class="col-sm-4">
                  <label class="col-xs-12 col-sm-12 form-custom" style="text-align: center;">
                    <?php echo e(__('message.exchange rate')); ?>

                  </label>
                  <div class="input-group" style="background-color:#7f8cae !important">
                    <?php
                      if(Auth::user()->role_id!=2){
                        if(Auth::user()->allow_to_change_exchange_rate) {
                          $canChangeRate = true;
                        }
                        else {
                          $canChangeRate = false;
                        }
                      }
                      else{ 
                        $canChangeRate = true; 
                      }
                    ?>
                    <input type="number" class="form-control custom-form-control" required step="0.01"  name="exchange_rate" v-model="datas.exchange_rate" step="0.0001" <?php if(!$canChangeRate): ?> readonly <?php endif; ?>>
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.exchange_from_name}}/{{datas.exchange_to_name}}
                    </span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <label class="col-xs-12 col-sm-12 form-custom" style="text-align: center;">
                    <?php echo e(__('message.exchange to')); ?>

                  </label>
                  <div class="input-group" style="background-color:#7f8cae !important">
                    <input type="number" class="form-control custom-form-control" required name="exchange_to_amount" v-model="datas.exchange_to_amount" step="0.01" @change="changeData('exchange_to_amount')" min="0">
                    <select class="btn btn-outline-secondary dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true" name="exchange_to_id" v-model="datas.exchange_to_id" ref="exchange_to_id">
                      <?php $__currentLoopData = $currencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index =>$currency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($currency->id); ?>" class="exchange_to_id_<?php echo e($currency->id); ?>" flage="/<?php echo e($currency->flage); ?>" sample_money="/<?php echo e($currency->sample_money); ?>"><?php echo e($currency->name); ?></option>
                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                  </div>
                </div>
              </div>
              
              <div class="row" style="margin-top:20px;">
                <div class="col-sm-4">
                  <label class="col-xs-12 col-sm-12 form-custom" style="text-align: right;padding-top:15px;">
                    <img :src="flage_from" style="width:70px;float: left;">
                    <?php echo e(__('message.remain')); ?>

                  </label>
                </div>
                <div class="col-sm-4">
                  
                  <div class="input-group" style="background-color:#7f8cae !important">
                    <input type="number" class="form-control custom-form-control" required name="remain" v-model="datas.remain" step="0.01" readonly="">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.exchange_from_name}}
                    </span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <img :src="flage_to" style="width:70px;float: right;">
                </div>
              </div>

              <div class="text-center" style="margin-top:20px;">
                <button class="btn btn-danger btn-sm" type="reset" style="padding:15px 20px;font-size: 20px;">
                  <?php echo e(__('message.cancel')); ?>

                </button>
                <!-- <button type="submit" class="btn btn-primary btn-sm" style="padding:15px 20px;font-size: 20px;">
                  <i class="fa fa-save"></i>
                  <?php echo e(__('message.save')); ?>

                </button> -->
                <button type="submit" class="btn btn-primary btn-sm" style="padding:15px 20px;font-size: 20px;">
                  <i class="fa fa-save"></i>
                  <?php echo e(__('message.save')); ?> & <?php echo e(__('message.print')); ?>

                </button>
              </div>
            </section>
        </form>
      </div>
      <div class="table-responsive">            
            <a href="<?php echo e(route('transactions')); ?>">  
              <h3 style="text-align: center;margin-top:15px;color:#3e5569"><?php echo e(__('message.last 5 transactions')); ?></h3>
            </a>
              <table
                id="zero_config"
                class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th><?php echo e(__('message.exchange from')); ?>/<?php echo e(__('message.exchange to')); ?></th>
                    <th><?php echo e(__('message.amount')); ?></th>
                    <th><?php echo e(__('message.exchange rate')); ?></th>
                    <th><?php echo e(__('message.exchange to')); ?></th>
                    <!-- <th><?php echo e(__('message.fee')); ?></th> -->
                    <th><?php echo e(__('message.received money')); ?></th>
                    <th><?php echo e(__('message.remain')); ?></th>
                    <th><?php echo e(__('message.created date')); ?></th>
                    <th><?php echo e(__('message.action')); ?></th>
                  </tr>
                </thead>
                <tbody>
                    <?php
                    ?>
                    <?php $__currentLoopData = $transactions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $transaction): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if(isset($transaction->moneyExchangeList)): ?>
                    <?php
                     $currencyFrom= $transaction->moneyExchangeList->exchangeFromCurrency;
                     $currencyTo= $transaction->moneyExchangeList->exchangeToCurrency;
                     
                    ?>
                    <tr>
                        <td><?php echo e($index+1); ?></td>
                        <td style="font-weight: bold;">
                          <?php echo e($currencyFrom->currency_code??''); ?>/
                          <?php echo e($currencyTo->currency_code??''); ?>

                        </td>
                        <td class="credit">
                          <?php echo e(number_format($transaction->amount,$currencyFrom->decimal_precision)); ?>

                          <?php echo e($currencyFrom->currency_code); ?>

                        </td>
                        <td class="credit blur">
                          <!-- <?php echo e($currencyTo->currency_code); ?> -->
                          <?php echo e(number_format($transaction->exchange_rate,$currencyTo->decimal_precision)); ?>

                        </td>
                        <td class="credit">
                          <?php echo e(number_format($transaction->amount_after_exchange,$currencyTo->decimal_precision)); ?>

                          <?php echo e($currencyTo->currency_code); ?>                          
                        </td>
                       <!--  <td class="credit">
                          <?php echo e(number_format($transaction->fee,$currencyTo->decimal_precision)); ?> 
                          <?php echo e($currencyTo->currency_code); ?>

                        </td> -->
                        <td class="credit blur">                          
                          <?php echo e(number_format($transaction->received_amount,$currencyFrom->decimal_precision)); ?>

                          <?php echo e($currencyFrom->currency_code); ?>

                        </td>
                        <td class="credit blur">
                          <?php echo e(number_format($transaction->remain,$currencyFrom->decimal_precision)); ?>

                          <?php echo e($currencyFrom->currency_code); ?>

                        </td>
                        <td title="<?php echo e($transaction->created_at); ?>">
                          <?php echo e($transaction->created_at->format('d/m/Y H:i')); ?>

                        </td> 
                        <td>
                          <button type="button" class="btn btn-primary btn-sm" onclick="printInvoice('<?php echo e($transaction->id); ?>')">
                            <i class="fa fa-print"></i>
                            <?php echo e(__('message.print')); ?>

                          </button>
                         
                        </td>
                    </tr>
                    <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
              </table>
            </div>
    </div>
  </div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    datas: {
      exchange_from_id: 1,
      exchange_from_name:'',
      exchange_from_code:'',
      exchange_to_id: 2,
      exchange_to_name:'',
      exchange_to_code:'',
      exchange_from_amount: '',
      exchange_to_amount: '',
      received_amount :'',
      remain: '',
      // rate_list:{},
      exchange_rate:'',
      calculation:'',
      money_exchange_list_id:'',
    },
    rates: [],
    flage_from:'',
    flage_to :''
  },
  beforeMount() {
    var that  = this;
    axios.get('/api/current-money-exchange-rate').then(function (response) {
        that.rates = response.data
        that.changeData('exchange_from_id',that.datas.exchange_from_id,that.datas.exchange_from_id);
        that.changeData('exchange_to_id',that.datas.exchange_from_id,that.datas.exchange_from_id);
    }).catch(function (response) {
        that.error = "Something went wrong";
        console.log(response)
    })

  },
  methods :{
      formatCurrency: function(amount, currency_code){
        if(currency_code=='KHR'){
          return (_.round((amount/100))*100);
        }
        else if(currency_code=='THB'){
          return (_.round(amount));
        }
        return _.round(amount,2);
      },
      changeData : function(var_that_changed, newVal=1, oldVal=2) {
        that= this;
        if(var_that_changed=='exchange_from_id'){
          var temp = this.rates.data.filter(rate => {
              return rate.exchange_from_id==that.datas.exchange_from_id && rate.exchange_to_id==that.datas.exchange_to_id;
           })
          if(temp.length){
            that.datas.money_exchange_list_id = temp[0].money_exchange_list_id
            that.datas.exchange_from_name = temp[0].exchange_from_name
            that.datas.exchange_from_code = temp[0].exchange_from_code
            that.datas.exchange_rate = temp[0].current_rate
            that.datas.calculation = temp[0].calculation
          }
          this.changeRate(var_that_changed,oldVal);
          setTimeout(() => {  
            this.flage_from= this.$refs.exchange_from_id.selectedOptions[0].getAttribute('flage');
            this.flage_to= this.$refs.exchange_to_id.selectedOptions[0].getAttribute('flage');
          }, 100);          
        }
        else if(var_that_changed=='exchange_to_id') {

          var temp = that.rates.data.filter(rate => {
              return rate.exchange_from_id==that.datas.exchange_from_id && rate.exchange_to_id==that.datas.exchange_to_id;
           })
          if(temp.length){
            that.datas.money_exchange_list_id = temp[0].money_exchange_list_id
            that.datas.exchange_to_name = temp[0].exchange_to_name
            that.datas.exchange_to_code = temp[0].exchange_to_code
            that.datas.exchange_rate = temp[0].current_rate
            that.datas.calculation = temp[0].calculation            
          }          
          this.changeRate(var_that_changed,oldVal);
          setTimeout(() => {  
            this.flage_from= this.$refs.exchange_from_id.selectedOptions[0].getAttribute('flage');
            this.flage_to= this.$refs.exchange_to_id.selectedOptions[0].getAttribute('flage');
          }, 100);
        }
        else if(var_that_changed=='exchange_from_amount') {
          if(that.datas.calculation=='x'){
             // alert(that.datas.exchange_to_code);
            // if(that.datas.exchange_to_code=='KHR'){
            //   that.datas.exchange_to_amount = _.round((_.round((that.datas.exchange_from_amount*that.datas.exchange_rate)/100,0)*100), 2);
            // }
            // else{
              that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount*that.datas.exchange_rate), that.datas.exchange_to_code);
            // }
          }
          else{ 
            that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount/that.datas.exchange_rate),that.datas.exchange_to_code);
          }
        }
        else if(var_that_changed=='exchange_to_amount') {
          if(that.datas.calculation=='x'){
            that.datas.exchange_from_amount = that.formatCurrency((that.datas.exchange_to_amount/that.datas.exchange_rate),that.datas.exchange_from_code);
          }
          else{
            that.datas.exchange_from_amount = that.formatCurrency((that.datas.exchange_to_amount*that.datas.exchange_rate),that.datas.exchange_from_code);
          }
        }
        else if(var_that_changed=='received_amount') {
          if(that.datas.received_amount!=''){
            that.datas.remain = that.formatCurrency((that.datas.received_amount-that.datas.exchange_from_amount), that.datas.exchange_to_code);
          }
        }
        else if(var_that_changed=='exchange_rate') {  
          if(that.datas.calculation=='x'){
            that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount*that.datas.exchange_rate),that.datas.exchange_to_code);
          }
          else{
            that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount/that.datas.exchange_rate),that.datas.exchange_to_code);
          }
        }
        // alert(that.datas.exchange_from_code+":"+that.datas.exchange_to_code)
        if(that.datas.received_amount!=''){
          that.datas.remain = that.formatCurrency((that.datas.received_amount-that.datas.exchange_from_amount),that.datas.exchange_from_code);
        }
        else {
          that.datas.remain='';
        }
        
      },
      changeRate : function(var_that_changed, oldVal) {
        if(this.datas.exchange_from_id==this.datas.exchange_to_id){
          if(var_that_changed=='exchange_from_id'){
            this.datas.exchange_to_id = oldVal;
          }
          else {
            this.datas.exchange_from_id = oldVal;
          }
          this.changeData(var_that_changed,this.datas.exchange_to_id, oldVal)       
        }
        if(this.datas.exchange_from_amount!='' && this.datas.exchange_to_amount!='') {
          if(that.datas.calculation=='x'){
            that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount*that.datas.exchange_rate),that.datas.exchange_to_code);
          }
          else{
            that.datas.exchange_to_amount = that.formatCurrency((that.datas.exchange_from_amount/that.datas.exchange_rate), that.datas.exchange_to_code);
          }
        }
      }

  },
  watch: {
    'datas.exchange_from_id': function(newVal, oldVal) {
      this.changeData('exchange_from_id', newVal, oldVal);
    },
    'datas.exchange_to_id': function(newVal, oldVal) {
      this.changeData('exchange_to_id', newVal, oldVal);
    },
    // 'datas.exchange_from_amount': function(v) {
    //   this.changeData('exchange_from_amount', v);
    // },
    // 'datas.exchange_to_amount': function(v) {
    //   this.changeData('exchange_to_amount', v);
    // },
    'datas.received_amount': function(newVal, oldVal) {
      this.changeData('received_amount', newVal, oldVal);
    },
    'datas.exchange_rate': function(newVal, oldVal) {
      this.changeData('exchange_rate', newVal, oldVal);
    }
  }
})
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript">
  function printInvoice(transaction_id){
    window.open("<?php echo e(route('exchange-invoice')); ?>/"+transaction_id);
  }
</script>
<?php if(isset($transaction_id) && $transaction_id!=null && isset($already_print) && $already_print==false): ?> 
<script type="text/javascript">
  // window.open("<?php echo e(route('exchange-invoice')); ?>/<?php echo e($transaction_id); ?>");
  // window.location.href = "<?php echo e(route('exchange-invoice')); ?>/<?php echo e($transaction_id); ?>";
  window.onload = function() {
    window.open("<?php echo e(route('exchange-invoice')); ?>/<?php echo e($transaction_id); ?>");
  }
</script>
<?php endif; ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('meta'); ?>
  <title><?php echo e(__('message.exchange money')); ?></title>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.main', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/moneyexchange/resources/views/moneyExchange/form.blade.php ENDPATH**/ ?>