@extends('layouts.main')
@section('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">{{__('message.transfer out')}}</h4>
        <div class="ms-auto text-end">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="{{route('transfer-out')}}" class="btn btn-primary btn-sm">
                  <i class="fa fa-plus"></i> 
                  {{{__('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">
        @if((true))        
            <section class="col-sm-6 col-xs-12">              
              <form  method="POST" action="{{route('transfers.store')}}" class="mt-5" enctype="multipart/form-data">
                {{ 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>{{__('message.to')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <select class="form-select" name="bank_id" required>
                    @foreach($banks as $index=>$bank)
                    <option value="{{$bank->id}}">
                      {{$bank->name}}
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label>{{__('message.sender phone')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="{{__('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>{{__('message.receiver name')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="{{__('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>{{__('message.receiver phone')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="{{__('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>{{__('message.code')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <input type="text" class="form-control" placeholder="{{__('message.code')}}" name="code" >
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label>{{__('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)">
                                            @foreach($currencies as $index=>$currency)
                                            <option value="{{$currency->id}}" @if($index==0) selected @endif flage="{{$currency->flage}}" sample_money="{{$currency->sample_money}}">
                      {{$currency->name}}
                    </option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-xs-6 col-sm-3" style="padding-top:10px;">
                  <label>{{__('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="{{__('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>{{__('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="{{__('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>{{__('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="{{__('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>{{__('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="{{__('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>{{__('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="{{__('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>{{__('message.note')}}</label>
                </div>
                <div class="col-xs-6 col-sm-9">
                  <div class="input-group">
                    <textarea class="form-control" placeholder="{{__('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();">
                  {{__('message.cancel')}}
                </button>
                <button type="submit" class="btn btn-primary btn-sm">
                  <i class="fa fa-save"></i>
                  {{__('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>
        @else
        
        @endif
      </div>
    </div>
  </div>
</div>
@endsection

@section('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:'{{$flage}}',
      sample_money:'{{$sample_money}}',
      currency_id: '{{$defaulCurrencyId}}',
      currency_name:'{{$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>
@endsection
@section('meta')
  <title>{{__('message.transfer out')}}</title>
@endsection