<?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.transfer out')); ?></h4>
        <div class="ms-auto text-end">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="<?php echo e(route('transfer-out')); ?>" 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 row">
        <?php if((true)): ?>        
            <section class="col-sm-6 col-xs-12">              
              <form  method="POST" action="<?php echo e(route('transfers.store')); ?>" class="mt-5" enctype="multipart/form-data">
                <?php echo e(csrf_field()); ?>    
              <input type="hidden" name="transaction_type" value="transferOut"/>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.to')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <select class="form-select" name="bank_id" required>
                    <?php $__currentLoopData = $banks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index=>$bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($bank->id); ?>">
                      <?php echo e($bank->name); ?>

                    </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </select>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.sender phone')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="<?php echo e(__('message.sender phone')); ?>" name="sender_phone">
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.receiver name')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="<?php echo e(__('message.receiver name')); ?>" name="receiver_name">
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.receiver phone')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="<?php echo e(__('message.receiver phone')); ?>" name="receiver_phone">
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.code')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="<?php echo e(__('message.code')); ?>" name="code" >
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.currency type')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <select class="form-select" name="currency_id" v-model="datas.currency_id" v-on:change="onChangeSite($event)">
                      <?php
                        $defaulCurrencyId='';
                        $defaulCurrencyName='';
                        $flage='';
                        $sample_money='';
                      ?>
                      <?php $__currentLoopData = $currencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index=>$currency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <?php 
                        if($index==0){
                          $defaulCurrencyId=$currency->id;
                          $defaulCurrencyName=$currency->name;
                          $flage=$currency->flage;
                          $sample_money=$currency->sample_money;
                        }
                      ?>
                      <option value="<?php echo e($currency->id); ?>" <?php if($index==0): ?> selected <?php endif; ?> 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="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.amount')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <input type="number" step="0.01" class="form-control" placeholder="<?php echo e(__('message.amount')); ?>" name="amount" v-model="datas.amount">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.currency_name}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.total fee')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <input type="number" step="0.01" class="form-control" placeholder="<?php echo e(__('message.total fee')); ?>" name="total_fee" v-model="datas.total_fee" min="0">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.currency_name}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.partner fee')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <input type="number" step="0.01" class="form-control" placeholder="<?php echo e(__('message.partner fee')); ?>" name="partner_fee" v-model="datas.partner_fee" min="0">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.currency_name}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.our fee')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <input type="number" step="0.01" class="form-control" placeholder="<?php echo e(__('message.our fee')); ?>" name="fee" readonly v-model="datas.fee" min="0">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.currency_name}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.total')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <input type="number" step="0.01" class="form-control" placeholder="<?php echo e(__('message.total')); ?>" name="total" readonly v-model="datas.total" min="0">
                    <span class="input-group-text" style="font-weight: bold;">
                      {{datas.currency_name}}
                    </span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label><?php echo e(__('message.note')); ?></label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <textarea class="form-control" placeholder="<?php echo e(__('message.note')); ?>" name="note" rows="3"></textarea>                    
                  </div>
                </div>
              </div>
              <div class="text-center">
                <button class="btn btn-danger btn-sm" type="button" onclick="window.history.back();">
                  <?php echo e(__('message.cancel')); ?>

                </button>
                <button type="submit" class="btn btn-primary btn-sm">
                  <i class="fa fa-save"></i>
                  <?php echo e(__('message.save')); ?>

                </button>
              </div>

            </form>
          </section>
          <section class="col-sm-3 col-xs-12" style="padding-top:15px;">
              <img :src="datas.flage" style="width:100%;margin-bottom: 5px;">
              <img :src="datas.sample_money" style="width:100%">
          </section>
        <?php else: ?>
        
        <?php endif; ?>
      </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: {
      flage:'<?php echo e($flage); ?>',
      sample_money:'<?php echo e($sample_money); ?>',
      currency_id: '<?php echo e($defaulCurrencyId); ?>',
      currency_name:'<?php echo e($defaulCurrencyName); ?>',
      total_fee:0,
      partner_fee:0,
      fee : 0,
      total:0,
      amount : null
    },
  },
  beforeMount() {
    this.chanageCurrency();
  },
  methods :{
      chanageCurrency : function(oldVal=null,newVal=null) {
        // console.log(this.datas);
        // this.datas.currency_name = '';
      },
      changeFee(newVal, oldVal) {
        this.datas.fee = this.datas.total_fee-this.datas.partner_fee;
        this.datas.fee = this.datas.fee.toFixed(2)
        if(this.datas.amount){
          this.datas.total = parseFloat(this.datas.total_fee) + parseFloat(this.datas.amount);
        }
      },
      onChangeSite(e) {
        if(e.target.options.selectedIndex > -1) {
            this.datas.currency_name = e.target.options[e.target.options.selectedIndex].text;
            this.datas.flage = e.target.options[e.target.options.selectedIndex].getAttribute('flage'); 
            this.datas.sample_money = e.target.options[e.target.options.selectedIndex].getAttribute('sample_money'); 
          }
      },
      changeAmount(newVal, oldVal) {
        if(this.datas.amount){
          this.datas.total = parseFloat(this.datas.total_fee) + parseFloat(this.datas.amount);
        }
      },
  },
  watch: {
    'datas.currency_id': function(newVal, oldVal) {
      this.chanageCurrency(newVal,oldVal);
    },
    'datas.amount': function(newVal, oldVal) {
      this.changeAmount(newVal,oldVal);
    },
    'datas.partner_fee': function(newVal, oldVal) {
      this.changeFee(newVal,oldVal);
    },
    'datas.total_fee': function(newVal, oldVal) {
      this.changeFee(newVal,oldVal);
    },
  }
})
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('meta'); ?>
  <title><?php echo e(__('message.transfer out')); ?></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/transfer/transferOut.blade.php ENDPATH**/ ?>