@extends('app')
@section('title'){{__('main.converter')}}@endsection
@section('description'){{__('main.convert_desc')}}@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.bigdrop{
  position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: unset !important;
}
.select2-container--default .select2-results>.select2-results__options {
     height: 100vh;
}
ul.select2-results__options {
    max-height: 100vh !important;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    height: 45px;
    padding: 12px 0;
    text-align: center;
    overflow: hidden;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 6px;
}
.select2-container--default[dir="ltr"] .select2-selection--single .select2-selection__arrow {
    right: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 13px;
}
</style>


@endsection

@section('content')
<div class="col-xs-12 block">
    <h1 class="block-header">
        <span><i class="fa fa-calculator"></i>  {{__('main.converter')}}</span>
    </h1>
    <p class="block-description">
      {{__('main.convert_desc')}}
    </p>
<div class="block-content">
              <form class="" dir="{{__('main.dir')}}" action="{{route('converter')}}" method="post" id="currency-converter">
                @csrf
  							<div class="container-fluid">
  								<div class="row">
                    <div class="col-md-12 col-xs-12">
                      <div class="form-group label-floating">
                        <label class="control-label">{{__('main.amount')}}</label>
                        <input type="number" required value="{{old('quantity')}}" id="quantity" name="quantity" placeholder="{{__('main.enter_amount')}}" class="form-control">
                      </div>
                    </div>
  									<div class="col-md-4 col-xs-12">
  										<div class="form-group label-floating">
  											<label class="control-label">{{ __('main.from') }}</label>
  											  <select name="from_currency" id="from_currency" class="select2 form-control" required>
                                                        </select>
  										</div>
  									</div>
                    <div class="col-md-4 col-xs-12">
                      <button><i class="fas fa-sync-alt"></i></button>
  									</div>
                    <div class="col-md-4 col-xs-12">
  										<div class="form-group label-floating">
  											<label class="control-label">{{ __('main.to') }}</label>
  											  <select name="to_currency" class="form-control select2 to_currency">
                                                        </select>
  										</div>
  									</div>
                    
                                </div>
  								<div class="row">
  									<div class="col-md-12">
  										<button type="submit" name="Submit" class="btn-lg btn btn-primary btn-block">
                                            {{__('main.convert_now')}}
                                          <i class="fa fa-paper-plane" aria-hidden="true"></i>
                      </button>
  									</div>
  								</div>
  							</div>
  						</form>
                <div class="clearfix"></div>
                <div id="result-converter"></div>
</div>
</div>
@endsection
@section('js')
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js" integrity="sha512-RtZU3AyMVArmHLiW0suEZ9McadTdegwbgtiQl5Qqo9kunkVg1ofwueXD8/8wv3Af8jkME3DDe3yLfR8HSJfT2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function ()
{


function formatState (state) {
 
  var baseUrl = "https://banklive.net/flags/1x1/";
  var $state = $(
    '<span><img width="20" height="20" src="https://banklive.net/'+ $(state.element).attr('data-flag') +'" class="img-flag" /> '+ state.text +' </span>'
  );
  return $state;
};

  $('.select2').select2({
    templateResult: formatState,
    templateSelection: formatState,
    dropdownCssClass : 'bigdrop'
  });
  
  $(".select2").on("select2:open",function(){ $(".select2-results").css("visibility","hidden"); }); $(".select2").on('select2:opening',function(){ setTimeout(function(){ $(".select2-results").css("visibility","visible"); }, 400); });


  $(function(){
    $("#currency-converter").submit(function() {
        var bank_id     = $('#in_bank').val();
        var currency_id = $('#currency_id').val();
        var quantity_id = $('#quantity').val();
        $.ajax({
            url : "{{route('converter')}}",
            type: 'POST',
            data: 'action=getconverter&currency_id='+currency_id+'&bank_id='+bank_id+'&quantity_id='+quantity_id+'&_token={{ csrf_token() }}',
            dataType: "html",
            success:function (data){
              $('#result-converter').html(data);
            }
        });
        return false;
    });
  });
    $(function(){
      $("#currency_id").change(function() {
          var currency_id = $(this).val();
          $.ajax({
              url : "{{route('converter')}}",
              type: 'POST',
              data: 'action=check&currency_id=' + currency_id + "&_token={{ csrf_token() }}",
              dataType: "html",
              success:function (data)
              {
                $('#in_bank').html(data);
              }
          });
      });
  });
});
</script>
@endsection