@extends('merchant.layout')
@section('title',__('Payments request'))
@section('css')
  <!-- DATA TABLES -->
  <link href="{{URL::asset('assets/admin/plugins/datatables/dataTables.bootstrap.css')}}" rel="stylesheet" type="text/css" />
  <style>
    
   .methods{
    margin: 10px;
    border: 2px solid;
    padding: 20px;
    border-radius: 5px;
   }
   label{
     font-size: 17px;
   }
   .option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 40px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}


li {
    /* display: block; */
}
  </style>
@endsection
@section('breadcrump')
  <h1>
    {{ __('Payments') }}
  </h1>
  <ol class="breadcrumb direction">
    <li><a href="{{ url('merchant/dashboard') }}"><i class="fa fa-dashboard"></i> {{__('Dashboard')}}</a></li>
    <li class="active">{{__('Payments')}}</li>
  </ol>
@endsection

@section('content')

<h4 class="pb-3 title_heading">{{__('Payment request')}}</h4> 
<form action="{{route('merchant.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()->guard('merchant')->user()->total_balance}}" required>
            </div>
        </div>
    </div>
<div class="form-group">
  <label for="">{{__('Payment Method')}}</label>
  <ul style="list-style-type:none;direction: rtl;"> 
    <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-12">
            <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-12">
            <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-12">
            <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