@extends('layout')
@section('title','Wallet')
@section('content')

    <div class="row">
                     <div class="col-sm-12">
                        <div class="card mb-4">
                           <div class="card-body">
						   	  <h5 class="m-0 ms-2 fw-semibold">Pay to My Wallet</h5><br>
                              <form class="row g-3 needs-validation" novalidate method="POST" action="{{route('wallet.add')}}" enctype="multipart/form-data">
                                  @csrf
                                <div class="col-3 col-12">
                                  <label class="form-label" for="inlineRadio1">Payment Mode</label>
                                  <div class="m-0">
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="tx_type" id="tx_type" value="1" onchange="get_payment_type($(this))" checked>
                                      <label class="form-check-label" for="inlineRadio1">Online</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="tx_type" id="tx_type" value="2" onchange="get_payment_type($(this))">
                                      <label class="form-check-label" for="inlineRadio2">Offline</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="row offline">
                                    <div class="col-md-3 position-relative">
                                    <label for="validationCustomUsername" class="form-label">Transaction Date<font color="red">*</font></label>
                                    <div class="input-group has-validation">
                                       <span class="input-group-text" id="inputGroupPrepend"><i class="bi bi-emoji-laughing"></i></span>
                                       <input type="date" class="form-control" name="tx_date" id="tx_date"  aria-describedby="inputGroupPrepend" required />
                                    </div>
                                 </div>
                                 <div class="col-md-3 position-relative">
                                    <label for="validationCustomUsername" class="form-label">Amount<font color=""red>*</font></label>
                                    <div class="input-group has-validation">
                                       <span class="input-group-text" id="inputGroupPrepend"><i class="bi bi-emoji-laughing"></i></span>
                                       <input type="text" class="form-control" name="amount" id="amount" aria-describedby="inputGroupPrepend" requried/>
                                    </div>
                                 </div>                                 
                                 <div class="col-md-3 position-relative">
                                    <label for="validationCustomUsername" class="form-label">Transaction ID (Ex: UTR Code)<font color="red">*</font></label>
                                    <div class="input-group has-validation">
                                       <span class="input-group-text" id="inputGroupPrepend"><i class="bi bi-mailbox"></i></span>
                                       <input type="text" class="form-control" name="tx_id" id="tx_id" aria-describedby="inputGroupPrepend" required />
                                    </div>
                                 </div>
                                 <div class="col-md-3 position-relative">
                                    <label for="validationCustomUsername" class="form-label">Transaction Proof<font color="red">*</font></label>
                                    <div class="input-group has-validation">
                                       <span class="input-group-text" id="inputGroupPrepend"><i class="bi bi-phone-fill"></i></span>
                                       <input type="file" class="form-control" name="tx_proof" id="tx_proof" aria-describedby="inputGroupPrepend" required />
                                    </div>
                                 </div>
                                 <div class="col-12">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                 </div>
                                </div>
                                <div class="row online" style="display:none">
                                    Online Form Payment gateways code will go here
                                </div>
                                 
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- Row ends -->

@endsection
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
   get_payment_type($('#tx_type'));
});

   function get_payment_type(val){
      console.log($(val).val());
    var id =  $(val).val();
    if(id == 1){
        $('.offline').hide();
        $('.online').show();
    }
    else{
        $('.offline').show();
        $('.online').hide();
    }
   }
    
</script>