@extends('front.pages.account.index')
@section('account_title')
   {{__('Payment request')}}
@endsection
@section('account_content')
<h4 class="pb-3 title_heading">{{__('Payment request')}}</h4> 
<form action="{{route('payment_request_submit')}}" method="POST" id="payment_form">
    @csrf
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label for="amount">{{__('Requested ammount')}}</label>
                <input type="number" name="amount" id="amount" class="form-control" min="0" max="{{auth()->user()->total_balance}}" required>
            </div>
        </div>
    </div>
<div class="form-group">
  <label for="">{{__('Payment Method')}}</label>
  <ul style="list-style-type:none">
    <li>
      <input type="radio" name="payment_method_id" class="option-input radio method" id="bank"  value="1">
      <label for="bank">{{__('Bank')}}</label>
      <ul style="list-style-type:none;">
        <li>
           <div class="col-md-8">
            <div id="1_form" style="display:none;margin:10px;" class="methods">
              
           </div>
        </li>
      </ul>
    </li>
    <li>
      <input type="radio" name="payment_method_id" class="option-input radio method" id="vodafone" value="2" required>
      <label for="vodafone">{{__('Vodafone Cash')}}</label>
      <ul style="list-style-type:none;">
        <li>
          <div class="col-md-8">
            <div id="2_form" style="display:none" class="methods">
            </div>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <input type="radio" name="payment_method_id" class="option-input radio method" id="postal" value="3" required> 
      <label for="postal">{{__('Postal')}}</label>
      <ul style="list-style-type:none;">
        <li>
          <div class="col-md-8">
            <div id="3_form" style="display:none" class="methods">
            </div>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <input type="radio" name="payment_method_id" class="option-input radio method" id="cash"  value="4" required>
      <label for="cash">{{__('Cash')}}</label>
    </li>
    <li>
      <br>
      <button type="submit" class="btn_1">{{__('Save')}}</button>
    </li>
  </ul>
</div>

</form>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
  
        $('#payments').addClass('active');

        $('#payment_form').validate();
  
        $('.method').click(function(){
  
          $('.methods').hide();
  
          $('.methods').html(``);
  
          var method=parseInt($(this).val());
          console.log(method);
  
          if(method==1)
          {
            $('#'+method+'_form').html(`
              <label>{{__('Bank Name')}}</label>
              <input type="text" class="form-control" name="bank_name" id="bank_name" required>
              <br>
              <label>{{__('Account Owner Name')}}</label>
              <input type="text" class="form-control" name="name" id="name" required>
              <br>
              <label>{{__('Account Number')}}</label>
              <input type="text" class="form-control" name="account_number" id="account_number" required>
            </div>
            `);
  
          }
          else if(method==2)
          {
            $('#'+method+'_form').html(`
            <label>{{__('Phone Number')}}</label>
            <input type="text" class="form-control" name="phone_number" id="phone_number" required>
            `);
          }
          else if(method==3)
          {
            $('#'+method+'_form').html(`
            <label>{{__('ID Card')}}</label>
            <input type="file" class="form-control" name="id_card" accept="image/*" required>
            `);
  
          }
  
          $('#'+method+'_form').show();
        
        });
  
    });
  </script>
@endsection